CSS背景图片居中代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS背景始终居中显示</title>
<style>
body {
	font: 11px/22px Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	background-image: url(//ku.shouce.ren/files/images/201601/56a335c7a96f0.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
#content {
	margin-left: 220px;
	margin-top: 40px;
	margin-right: 80px;
}
</style>
</head>
<body>
<div id="content">
	<h1>Chinese style stuffed peppers</h1>
	<ul>
		<li>1 tablespoon of oil</li>
		<li>1 crushed garlic clove</li>
		<li>Peeled and finely chopped fresh ginger root</li>
		<li>250g minced pork, beef or Quorn</li>
		<li>1 chopped spring onion</li>
		<li>1 chopped celery stick</li>
		<li>Grated rind of 1 lemon</li>
		<li>Finely chopped red chilli (optional)</li>
		<li>4 large green peppers</li>
	</ul>
	<p>These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.</p>
	<p>Heat the oil in a wok. Add the garlic and stir fry until golden.</p>
	<p>Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.</p>
	<p>Core and remove the seeds of the peppers and cut them into quarters.</p>
	<p>Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish</p>
	<p>Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.</p>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS背景图片居中代码

分类

CSS3

描述

CSS控制图片实现始终居中显示，不管你如何拉大或缩小浏览器，它始终处于浏览器的中间位置，这是个十分实用的代码，很多时候我们都要用到此种情形的居中。