css让元素居中的十种方法

最新推荐文章于 2022-10-24 19:44:41 发布

z逍遥

最新推荐文章于 2022-10-24 19:44:41 发布

阅读量3.3k

点赞数

分类专栏：小知识总结

本文链接：https://blog.csdn.net/zyq51/article/details/108504874

版权

本文介绍了CSS让元素居中的十种方法，包括绝对定位配合负margin、margin auto、calc计算、transform、line-height、writing-mode、table形式、table-cell、弹性盒子和grid布局。每种方法的优缺点都有详细说明，其中最常用的是绝对定位配合margin auto和弹性盒子。

摘要由CSDN通过智能技术生成

一、十种方法

第一种通过绝对定位的方式 absolute + 负margin
首先知道子元素的宽高，给子元素设置
top：50%；left：50%，
但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，

通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了

**优点：**比较好理解，兼容性好

**缺点：**需要知道子元素的宽高

第二种：也是通过绝对定位的方式 absolute + margin auto
这个是需要将各个方向的距离都设0，再讲margin设为auto；就行

**优点：**兼容性也很好
**缺点：**需要知道子元素的宽高

第三种：absolute + calc（计算）
这种方法top的百分比是基于元素的左上角，那么在减去宽度与高度的一半就好了
calc:任何长度值都可以使用calc()函数进行计算；
calc()函数使用标准的数学运算优先级规则；
它支持 “+”, “-”, “*”, “/” 运算

也可以查看calc教程：https://www.runoob.com/cssref/func-calc.html

**优点：**他的兼容性依赖的是calc的兼容性

**缺点：**同样是需要知道子元素的宽高

第四种：absolute + transform （过渡）
这个方法不需要子元素固定宽高

修复绝对定位的问题，还可以使用css3新增的transform，transform的translate

属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate设置为-50%，就可以做到居中了

**优点：**代码量少

**缺点：**IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.

第五种：line-height
只对文本有效果，对定宽高的div是没有用的。所以在文本水平垂直居中时使用。
优点：代码简洁

缺点：只对文本有效，只对单行文本有效，多行文本不可以

第六种：writing-mode
可以参考：https://www.runoob.com/cssref/css-pr-writing-mode.html

这种方法稍微有些复杂，writing-mode可以改变文字的显示方向

第七种：table 形式
通过table单元格的形式设

**优点：**tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

**缺点：**这个不是table的正确方法，不是很建议使用，但是也是可以实现的

第八种：table-cell实现水平垂直居中: table-cell middle center组合使用
直接给父级设

display: table-cell;
vertical-align: middle;
text-align: center;
为了可以明显看出，我们可以给它设个宽高与边框

width: 240px;
height: 180px;
border:1px solid #666;
第九种：弹性盒子的方式
通过给父元素设置justify-content: center;

align-items: center;就可以了

**优点：**移动端使用灵活自如

**缺点：**pc端需要根据兼容情况来判定

第十种：grid（网格布局）
给父级设display:grid;

给子元素设align-self: center;justify-self: center;

**优点：**代码量少

**缺点：**兼容不如flex，建议用flex

二、具体实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        ----------
         提示代码开始 
         ----------
         */
         body{
   
             background-color: aquamarine;
         }
        p {
   
            text-align: center;
        }

        /* 
        ----------
        提示代码结束 
        ----------
        */


        /* 
        ----------
        公共代码开始 
        ----------
        */
        .wp {
   
            /*样式代码(父元素)*/
            border: 1px solid #432;
            width: 300px;
            height: 300px;

            margin-bottom: 20px;
            border-radius: 16px;
        }

        .box_fixed_w_h {
   
            /*固定宽高代码(子元素)*/
            width: 100px;
            height: 100px;

            background-color: green;
            border-radius: 16px