CSS布局之水平居中布局

时间 2019-11-06

标签 css 布局水平居中栏目 CSS 繁體版

原文原文链接

概念：水平居中布局指的是当前元素在父级元素容器中，水平方向是居中显示的。

方案一： inline-block + text-align

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平居中布局</title>
	<style> #parent { width: 100%; height: 200px; background-color: #ccc; text-align: center; } #child { width: 200px; height: 200px; background: orangered; display: inline-block; } </style>
</head>
<body>
<div id="parent">
	<div id="child"></div>
</div>
</body>
</html>
复制代码

优缺点

优势：浏览器兼容性好。代码中使用的均是 CSS 2 中的属性，浏览器兼容性良好。css

缺点：text-align 具备继承性。子元素中的文本会继承父元素的 text-align 属性。若子元素中的文本不是居中显示时，则须要从新设置 text-align 属性将其覆盖。html

方案二：table + margin

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平居中布局</title>
<style> #parent { background-color: #ccc; } #child { width: 200px; height: 200px; /* display 的值为 block 和 table */ display: table; /* margin 属性:外边距 * 一个值 - 上右下左 * 二个值 - 第一个值表示上下，第二个值表示左右 * auto 浏览器自动计算(等分) * 三个值 - 第一个值表示上，第二个值表示左右，第三个值表示下 * 四个值 - 上右下左 */ margin: 0 auto; background: orangered; } </style>
</head>
<body>
	<!--定位父级元素-->
	<div id="parent">
		<!--定位子级元素-->
		<div id="child"></div>
	</div>
</body>
</html>
复制代码

优缺点

优势：只须要对子元素设置就能够显示水平居中布局效果。浏览器

缺点：若是子元素脱离文档流，致使 margin 属性的值失效。布局

方案三：absolute + transform

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平居中布局</title>
	<style> #parent { width: 100%; height: 200px; background-color: #ccc; /* 开启定位 */ position: relative; } #child { width: 200px; height: 200px; background: orangered; /* 当把当前元素设置为绝对定位后: *若是父级元素没有开启定位，当前元素相对于页面定位， *若是父级元素开启了定位的话，当前元素相对于父级元素定位 */ position: absolute; left: 50%; /* 子级元素相对于父级元素的左边 50% */ transform: translateX(-50%); } </style>
</head>
<body>
	<!--定位父级元素-->
	<div id="parent">
		<!--定位子级元素-->
		<div id="child"></div>
	</div>
</body>
</html>
复制代码

优缺点

优势：父级元素是否脱离文档流，不影响子级元素居中显示效果。ui

缺点：transform 属性是 CSS 3 中新增的属性，浏览器支持状况很差。spa

CSS布局之水平居中布局

概念：水平居中布局 指的是当前元素在父级元素容器中，水平方向是居中显示的。

方案一： inline-block + text-align

优缺点

方案二：table + margin

优缺点

方案三：absolute + transform

优缺点

概念：水平居中布局指的是当前元素在父级元素容器中，水平方向是居中显示的。