CSS之不定div居中

最新推荐文章于 2024-09-24 11:41:48 发布

之乎者也_li

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量129

点赞数

分类专栏： css html 文章标签： css

本文链接：https://blog.csdn.net/qq_36378302/article/details/82425095

版权

css html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

方法一：

.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    margin: 100px auto;
}
.children{
    display: inline;
    vertical-align: middle;
    border: 1px solid rebeccapurple;
}

方法二：

.parent{
    width: 800px;
    height: 800px;
    position: relative;
}
.children{
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="divCenter.css">
</head>
<body>
    <div class="parent">
        <div class="children">
            sadad
          
        </div>
    </div>
</body>
</html>

方式一是传统CSS

方式二是CSS3的实现方式