垂直水平居中方法汇总

发表于 | 分类于

水平居中

行内元素水平居中

text-align:center可以实现在块级元素内的行内元素的居中,对inline,inline-block,inline-table均有效
如果内部包含着另外一个块级元素，可以把它有块级元素转换为行内块元素

1
2
3
 <div style="text-align: center;">
            <div style="width: 100px;height:100px;background:blue;display: inline-block"></div>
</div>

块级元素水平居中

将这个块级元素设置左右边距margin-left,margin-right为auto

1
2
3
<div>
           <div style="width: 100px;height:100px;background:blue;margin: auto;"></div>
           </div>

利用table+margin的方法

将子元素设置为display:table 在表现上类似于block元素

1
2
3
<div>
          <span style="width:100px;height:100px;background:blue;display: table;margin: auto;"></div>
          </div>

使用absolute+transform方法

将父元素设置为相对定位 将子元素设置为绝对定位，向右移动子元素，移动距离为父元素的一半，最后再移动子元素的一半宽度来达到居中的效果
absolute 定位针对父元素中不是static定位的第一个父元素进行定位

1
2
3
4
<div style="position: relative;">
        <div style="position: absolute;left: 50%;transform: translateX(-50%);background: blue;width: 100px;height: 100px;">
     
     </div>

使用flex+justify-content方法

1
2
3
4
.parent{
    display:flex;
    justify-content:center;
}

多个块级元素水平居中 使用flex布局

1
2
3
4
.parent{
    display:flex;
    justify-content:center;
}

对于水平排列的块级元素设置为inline-block,在父元素上设置为text-align:center即可。

1
2
3
4
<div style="text-align: center;">
         <div style="display: inline-block;width: 50px;height: 50px;background: blue;"></div>
         <div style="display: inline-block;width: 50px;height: 50px;background: blue;"></div>
      </div>

浮动元素水平居中(重点考察)

**对于定宽的浮动元素，通过设置子元素relative+负margin，通过设置向右浮动为父容器宽度的50%,随后向左偏移自己的宽度的一半即可。

1
2
3
4
5
<div>
       <div style="float: left;background: blue;width: 100px;height: 100px;
       position: relative;left: 50%;margin-left: -50px;
       "></div>
     </div>

不定宽的浮动元素，外层嵌套一个浮动元素为float:left，随后设置定位为向左left:50%,
内部也设置为相对定位:float:left:50%;

1
2
<div style="float: left;left:50%; position: relative;">
      <div style="float: left;left:50%;width:100px;height:100px;background: blue;"></div>

通用方法：使用flex布局

1
2
3
4
<div style="display: flex;justify-content: center;">
         <div style="float:left;background: blue;width:20%;height: 100px;
         "></div>
       </div>

绝对定位元素水平居中(重点考察)

1
2
3
4
<div>
        <div style="background: blue;width:20%;height: 100px;position: absolute;margin: 0 auto;left: 0;right: 0;
        "></div>
      </div>

通过设置子元素的position为absolute后，设置margin:0,auto,随后left和right设置为0即可。

垂直居中

单行内联元素垂直居中

父元素设置line-height等于行高

1
2
3
<div style="height: 500px;line-height:500px">
       <span>曹凯强</span>
      </div>

多行内联元素垂直居中 使用flex，flex-direction为column定义主轴方向，

1
2
3
4
5
<div style="display:flex;flex-direction: column;justify-content: center;height:500px">
                   <p>Dance like nobody is watching, code like everybody is. </p>   
                       <p>    Dance like nobody is watching, code like everybody is.    
                           Dance like nobody is watching, code like everybody is.</p>
       </div>

利用表布局，设置子元素的display为table-cell 设置vertical-algin为middle即可

1
2
3
4
5
6
7
<div style = "display: table;height: 1000px;">
              <div style="display: table-cell;vertical-align: middle;"
                  <p>Dance like nobody is watching, code like everybody is. </p>   
                      <p>    Dance like nobody is watching, code like everybody is.    
                          Dance like nobody is watching, code like everybody is.</p>
      </div>
      </div>

块级元素的垂直居中

绝对定位为距离顶部50%,并设置margin-top偏移元素高度的一半

1
2
3
4
5
6
7
8
9
position:absolute;
top:50%;
margin-top:-50px;

    <div style="position: relative;height: 500px;">
        <div style="position: absolute;width:100px;height:100px;top:50%;left: 50%;margin-top: -50px;margin-left: -50px;background: blue;"
        </div>
               
        </div>

使用absolute + transform

1
2
top:50%;
transform:translateY(-50%)

使用flex + align-items 子元素垂直居中 在父元素中设置

1
2
display:flex;
align-items:center;

使用table-cell+vertical-align 注意 是父元素 将父元素转换为一个表格表单类似于td,tr,再通过设置vertical-align设置

水平垂直居中

设置子元素的position:absolute 随后设置margin:auto

1
2
3
4
5
6
7
8
9
10
11
12
#container{
    position:relative;
    height:100px;
}
#center{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

使用flex布局 在主轴和纵轴上都设置对齐方向

1
2
3
4
5
#container{
    display:flex;
    justify-content:center;
    align-item:center;
}

grid与margin:auto结合

`

#container{
display:grid;
}

#center{
margin:auto;
}