如何居中div

最新推荐文章于 2024-10-05 23:11:01 发布

不可爱仙女

最新推荐文章于 2024-10-05 23:11:01 发布

阅读量100

点赞数

文章标签： css flex css3

本文链接：https://blog.csdn.net/rraxx/article/details/114698337

版权

div的居中

水平居中

水平居中：

给 div 设置一个宽度，然后添加 margin:0 auto 属性

div{
            width: 300px;
            margin: 0 auto;
        }

把div设为inline-block，给父元素设置text-align:center,且父元素的宽度不设置

<style>
        .container {
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
            font-size: 0;
            }

            .box {
            display: inline-block;
            width: 500px;
            height: 400px;
            background-color: pink;
            }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>

利用flex布局的justify-content:center;

水平垂直居中

绝对定位的div居中

.container{
            position: absolute;
            width: 300px;
            height: 300px;
            margin: auto;
            top: 0%;
            left: 0%;
            bottom: 0%;
            right: 0%;
            background-color: rgb(146, 73, 73);
        }

top:50%,left:50%,margin减去宽高的一半

.container{
            position: absolute;
            width: 300px;
            height: 300px;
            margin: -150px 0 0 -150px;
            top: 50%;
            left: 50%;;
            background-color: rgb(146, 73, 73);
        }

未知容器的宽高，利用transform属性

.container{
            position: absolute;
            width: 300px;
            height: 300px;
            /* translate:移动; */
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background-color: rgb(146, 73, 73);
        }

利用flex布局
注意父元素一定要设置宽高

.container{
			width:100%;
			height:600px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bin{
            width: 300px;
            height: 300px;
            background-color: rgb(228, 127, 127);
        }

利用text-align:center和vertical-align:middle属性

.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}