CSS-水平/垂直居中的方法

你的名字 2022-12-03 02:25 263阅读 0赞

[转载原文][Link 1]

[可以参考][Link 2]

## 水平居中 ##

*  块级元素居中 HTML 结构

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

*  行内元素居中 HTML 结构

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

### 1 `text-align: center` ###

*  设置父元素 `text-align: center`

.parent { 
    	text-align: center;
    }

### 2 `margin: auto` ###

*  设置宽度（块级元素不设置宽度的话默认占满一行，这样居中就没有效果）+ `margin: 0 auto`

.parent { 
    	text-align: center;
    }
    .child { 
    	width: 100px;
    	margin: 0 auto;
        background: blue;
    }

### 3 浮动 + `margin/transform` ###

*  通过 50%定位 + `margin/transform` 居中
    
    margin 必须为子元素宽高的一半，如下： child 宽为 100px `margin-left: -50px` （兼容IE8+）
    
    CSS3 的 transform 属性，适用于移动端（兼容IE9+）

.parent { 
    	text-align: center;
    	position: absolute;
    }
    .child { 
    	width: 100px;
    	background: blue;
    	float: left;
    	position: relative;
    	left: 50%;
    	margin-left: -50px;
        /* transform: translateX(-50%); */
    }

### 4 绝对定位 + `margin/transform` ###

*  absolute 绝对定位，元素脱离文档流，浏览器把它视作块级元素（行内->块，就可以设置宽高了）

.parent { 
    	text-align: center;
    }
    .child { 
    	color: darkblue;
    	background: lightgray;
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    }

## 垂直居中 ##

*  块级元素居中 HTML 结构

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

*  行内元素居中 HTML 结构

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

*  子元素 span（内联元素）的 `padding-top/padding-bottom` 属性不生效， `padding-left/padding-right` 生效，`margin` 同理
 *  非替换元素（span/a）的内边距、边框和外边距对行内元素及其生成框没有垂直效果，也就是说，它们不会影响内框的高度，但可替换元素（input）会生效
 *  [可替换元素和非可替换元素][Link 3]
    
    替换元素一般有内在尺寸和宽高比（auto时起作用），所以具有 width 和 height，可以设定
    
    不可替换元素通过 line-height 设置行高

### 1 设置 `line-height: height` ###

*  [html标签默认属性值][html]
 *  需要注意有些标签是有 margin 的，会影响居中对齐，所以要 `margin: 0` 去掉默认值

.parent { 
    	width: 200px;
    	height: 200px;
    	line-height: 200px;
    	border: 1px solid black;
    }

### 2 绝对定位 + `margin/transform` ###

*  `margin` 需要提前知道尺寸， `margin-top: -(height/2)` `margin-left: -(width/2)`
 *  transform 不需要提前知道尺寸，兼容性没有那么好

.parent { 
    	width: 200px;
    	height: 200px;
    	border: 1px solid black;
    	position: relative;
    }
    .child { 
    	width: 100px;
    	height: 50px;
    	background: blue;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-top: -25px;
    	margin-left: -50px;
    	/* transform: translate(-50%,-50%); */
    }

### 3 绝对定位 + `margin: auto` ###

*  不需要知道尺寸，兼容性好

.parent { 
    	width: 200px;
    	height: 200px;
    	border: 1px solid black;
    	position: relative;
    }
    .child { 
    	width: 100px;
    	height: 50px;
    	background: blue;
    	position: absolute;
    	left: 0;
    	right: 0;
    	top: 0;
    	bottom: 0;
    	margin: auto;
    }

### 4 `display: table-cell` ###

*  `display: table-cell` 在利用 `vertical-align: middle`
 *  同样适用多行文字垂直居中

.parent { 
    	width: 200px;
    	height: 200px;
    	border: 1px solid black;
    	display: table;
    }
    .child { 
    	display: table-cell;
    	vertical-align: middle;
    	text-align: center;
    }

### 5 `display: flex/grid` ###

*  兼容性不好

.parent { 
    	width: 200px;
    	height: 200px;
    	border: 1px solid black;
    	display: flex;
    	align-items: center; /* 垂直居中 */
    	justify-content: center; /* 水平居中 */
    }

### 6 :伪元素 ###

*  这个不太好理解，推荐参考 [从一个垂直居中的方法深度了解基线与 vertical-align][vertical-align]
 *  `vertical-align` 概念：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式
    
    **行内元素的基线**：就是元素的基线
    
    **行内元素父元素的基线**：取决于它的一个子元素——基准元素，基准元素依据哪条线对齐，父元素的基线就是哪条线
 *  基准元素是按照自己的基线对齐，其余行内元素按照父元素的基线对齐

.parent { 
    	width: 200px;
    	height: 200px;
    	border: 1px solid black;
    	text-align: center;
    }
    .child { 
    	width: 100px;
    	height: 50px;
    	background: blue;
    	display: inline-block;
    	vertical-align: middle;
    }
    .parent::before { 
    	content: '';
    	height: 100%;
    	display: inline-block;
    	vertical-align: middle;
    }

1.  父元素首先确定基准元素（高度100%）—— `content: ''`
2.  利用 `vertical-align: middle` 将父元素的基线设置为伪元素的中线
3.  其它行内元素采用中线对齐，child的基线 要对齐 伪元素的中线，再利用 `vertical-align: middle` 将child的中线和 伪元素的中线对齐
4.  而伪元素的高度是 100%，所以它的中线就是整个父元素的中线

### 7 `display: inline-block` ###

*  HTML 结构

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

*  CSS 样式
    
    和伪元素同样的道理

.parent { 
    	width: 200px;
    	height: 200px;
    	border: 1px solid black;
    	position: relative;
    }
    .child, .brother { 
        display: inline-block;
        vertical-align: middle;
    }
    .child { 
        background: blue;
        font-size: 12px;
    }
    .brother { 
        height: 400px;
        font-size: 0;
    }

[Link 1]: https://juejin.im/post/6844903560879013901?utm_source=gold_browser_extension#heading-1
[Link 2]: https://blog.csdn.net/z591391960/article/details/106171794
[Link 3]: https://segmentfault.com/a/1190000006835284
[html]: https://juejin.im/post/6844904001281114126
[vertical-align]: https://juejin.im/post/6844903621327323143