css 位置属性居中

### CSS实现元素水平垂直居中的方法 以下是六种常见的CSS实现元素水平垂直居中的方法： #### 方法一：`display: table-cell` 通过将父容器设置为 `display: table-cell` 并结合 `vertical-align: middle` 和 `text-align: center` 属性，可以轻松实现子元素的水平和垂直居中[^1]。 ```html <style> .father { display: table-cell; width: 200px; height: 200px; background: skyblue; vertical-align: middle; /* 垂直对齐 */ text-align: center; /* 水平对齐 */ } .son { display: inline-block; width: 100px; height: 100px; background: red; } </style> <div class="father"> <div class="son"></div> </div> ``` --- #### 方法二：Flexbox布局 Flexbox 是现代浏览器中最常用的方法之一。只需给父容器应用 `display: flex`，并配合 `justify-content` 和 `align-items` 即可完成居中操作[^2]。 ```html <style> .parent { display: flex; justify-content: center; /* 主轴方向上的居中 */ align-items: center; /* 交叉轴方向上的居中 */ width: 200px; height: 200px; background-color: lightgreen; } .child { width: 100px; height: 100px; background-color: orange; } </style> <div class="parent"> <div class="child"></div> </div> ``` --- #### 方法三：绝对定位 + 负边距 这种方法适用于已知子元素宽高的情况。通过设置子元素的 `position: absolute`，再利用负边距调整位置来达到居中效果。 ```html <style> .container { position: relative; width: 200px; height: 200px; background-color: pink; } .item { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 高度的一半 */ margin-left: -50px; /* 宽度的一半 */ width: 100px; height: 100px; background-color: purple; } </style> <div class="container"> <div class="item"></div> </div> ``` --- #### 方法四：绝对定位 + transform 此方法无需知道子元素的具体尺寸即可实现居中。借助 `transform` 的偏移功能，使子元素相对于其自身的中心点移动到指定位置。 ```html <style> .wrapper { position: relative; width: 200px; height: 200px; background-color: cyan; } .element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-color: brown; } </style> <div class="wrapper"> <div class="element"></div> </div> ``` --- #### 方法五：Grid布局 CSS Grid 提供了一种更简洁的方式来进行二维空间内的布局控制。只需要定义网格区域以及对其方式即可。 ```html <style> .grid-container { display: grid; place-items: center; /* 同时处理水平和垂直居中 */ width: 200px; height: 200px; background-color: lavender; } .grid-item { width: 100px; height: 100px; background-color: teal; } </style> <div class="grid-container"> <div class="grid-item"></div> </div> ``` --- #### 方法六：Line-height法 当需要让单行文字在固定高度的框内垂直居中时，可以通过设置 `line-height` 等于容器的高度来快速解决。 ```html <style> .text-box { line-height: 200px; /* 设置等于容器高度 */ text-align: center; /* 文本水平居中 */ width: 200px; height: 200px; background-color: gold; } .inner-text { font-size: 20px; } </style> <div class="text-box"> <span class="inner-text">居中文本</span> </div> ``` ---