<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .one {
            width: 100px;
            height: 100px;
            background: red;
        }

        .box2 {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: flex;
        }

        .one2 {
            width: 100px;
            height: 100px;
            background: red;
            margin: auto;
        }

        .box3 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

        }

        .box4 {
            position: absolute;
            /* // 绝对定位 */
            margin: auto;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: red;

        }

        .box5 {
            float: left;
            position: relative;
            left: 50%;
        }

        .box5>span {
            float: left;
            left: -50%;
            position: relative;
        }
    </style>
</head>

<body>
    <h1>如何让盒子水平垂直居中 方法一</h1>
    <div class="box">
        <div class="one"></div>
    </div>
    <h1>如何让盒子水平垂直居中 方法二</h1>
    <div class="box2">
        <div class="one2"></div>
    </div>
    <h1>不知道宽度如何水平垂直居中</h1>
    <div class="box3">没有宽度水平垂直居中</div>
    <div class="box5"><span>没有宽度水平居中 例子,分页, 可能2-5页, 所以宽度不确定</span></div>
    <div class="box4">绝对定位水平垂直居中</div>
</body>

</html>

效果图
方法一: 给父元素加

display :flex;
 jusitfy-content:center; 
align-items:center;

方法二:给父元素加
display:flex;
子元素加 margin:auto; 就OK了,是不是很简单

垂直水平居中

水平居中

块级元素水平居中
1, 最简单的方法: 给一个显示的宽度, 然后margin: 0 auto; 就可以设置水平居中了.
2, 不知道宽度怎么水平居中

方法一: 
            position: absolute; //绝对定位
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
方法二: 
    页面结构:    <div class="box5"><span>没有宽度水平居中例如, 做一个分页的样式, </span></div>
      .box5 {
            float: left;
            position: relative;
            left: 50%;
        }
        .box5>span {
            float: left;
            left: -50%;
            position: relative;
        }

绝对定位水平垂直居中

 .box4 {
            position: absolute;
            /* // 绝对定位 */
            margin: auto;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: red;
        }

box4

所以, 水平垂直居中有几种方法:

有父元素的 display:flex; 子元素 margin:auto;
没有父元素的, 使用绝对定位和 transform属性, translate x y 轴平移
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

水平居中:

有宽度的, margin: 0 auto;
没有宽度的, 父子元素先左浮动, 再相对定位, left:50%, 子元素,left:-50%
.box5 { float: left; position: relative; left: 50%; } .box5>span { float: left; left: -50%; position: relative; }

div居中

div居中

水平居中

绝对定位水平垂直居中

推荐阅读更多精彩内容