css实现水平垂直居中的几种方式

JosonHo

于 2019-06-03 10:23:34 发布

阅读量250

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/XTXTXTXTYYYY/article/details/90747995

版权

css 专栏收录该内容

4 篇文章

订阅专栏

1. 使用绝对定位与相对定位

2. table布局方式

3. flex布局(1)

4. flex布局(2)

5. transform

6. grid布局

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>

<body>
<div class="box">
  <div class="box1"></div>
</div>
</body>
</html>

<style>
.box {
    width: 300px;
    height: 200px;
    background: red;
    display: flex;
}
.box1 {
    width: 100px;
    height: 50px;
    background: yellow;
    margin: auto;
}
</style>