css 常用居中布局总结

主流CSS 布局

居中布局

相对定位是不脱离文档流的,元素的初始位置占据的空间会被保留

1. 水平居中布局
2. 垂直居中布局
3. 居中布局(水平+垂直)

水平居中布局常见解决方案

水平居中布局就是指当前元素在父级元素容器中, 水平方向是居中显示的.

第一种方案: inline-block + text-align 配合使用

1. 首先我们需要在 html 页面中定义一个父子结构

 <div class="parent">
        <div class="child">文本</div>
  </div>

2. 通过以下 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: 行内块级元素(块级+内联) 

*/

这种实现方案的优缺点

1. 优点:

// 浏览器兼容性比较好

2. 缺点:

// text-algin 属性是具有继承性的, 会导致子级元素的文本也是居中显示的.

# 解决方案
  在子级元素中重新设置 text-algin 属性

第二种方案: table + margin 属性配合使用

1. 首先我们同样在 html中定义父子结构

 <div class="parent">
        <div class="child">child</div>
  </div>

2. 通过以下css 样式代码实现水平方向居中布局

这种解决方案的 table和 margin 属性都是设置给子级元素的, 而不需要给父级元素设置任何 居中样式属性.

<s