主流CSS 布局
居中布局
- 水平居中布局
- 垂直居中布局
- 居中布局(水平+垂直)
水平居中布局常见解决方案
水平居中布局就是指当前元素在父级元素容器中, 水平方向是居中显示的.
第一种方案: inline-block + text-align 配合使用
- 首先我们需要在
html
页面中定义一个父子结构<div class="parent"> <div class="child">文本</div> </div>
- 通过以下
css
样式代码实现水平方向居中布局效果
- 父级元素设置
text-align
值为center
- 子级元素设置
display: inline-block
<style> .parent { width: 100%; height: 200px; background: white; text-align: center; } .child { width: 200px; height: 200px; background: red; display: inline-block; } </style>
实现这种居中效果的原理解释:
/* text-align属性: 是为文本内容设置对齐方式的, 而当display 属性为 inline-block的时候也是内联元素,所以对其有效 left: 左对齐 center: 居中对齐 right: 右对齐 */ # -------------------- /* display 属性: block: 表示块级元素 inline: 表示内联元素 inline-block: 行内块级元素(块级+内联) */
这种实现方案的优缺点
- 优点:
// 浏览器兼容性比较好
- 缺点:
// text-algin 属性是具有继承性的, 会导致子级元素的文本也是居中显示的. # 解决方案 在子级元素中重新设置 text-algin 属性
第二种方案: table + margin 属性配合使用
- 首先我们同样在
html
中定义父子结构<div class="parent"> <div class="child">child</div> </div>
- 通过以下
css
样式代码实现水平方向居中布局这种解决方案的
table和 margin
属性都是设置给子级元素的, 而不需要给父级元素设置任何 居中样式属性.<s