块级元素水平和垂直方向居中的方式

时间：2019-12-22 18:26:16 阅读：79 评论：0 收藏：0 [点我收藏+]

标签：display lin line lex margin mon 垂直元素 relative

块级元素水平和垂直方向居中的方法一共三种

1.先设置块级元素的宽高，然后利用定位和外边距将元素在水平和垂直方向上居中

示例：

<style>
 .father{
 width: 100%;
 height: 500px;
 position: relative;
 }
 .son{
 width: 100px;
 height: 100px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -50px;
 margin-top: -50px;
 background-color: red;
 }
 </style>
<body>
<div class="father">
 <div class="son"></div>
</div>
</body>

2.已知元素宽高，然后将父级元素设置为弹性盒，然后设置子级元素的外边距为自动

示例：

<style>
 .father{
 width: 100%;
 height: 500px;
 display: flex;
 }
 .son{
 width: 100px;
 height: 100px;
 margin: auto;
 background-color: red;
 }
 </style>
<div class="father">
 <div class="son"></div>
</div>
</body>

 
3.已知元素宽高，然后利用定位和偏移量来设置元素水平和垂直方向上居中
示例：<style>
 .father{
 width: 100%;
 height: 500px;
 position: relative;
 }
 .son{
 width: 100px;
 height: 100px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 background-color: red;
 }
 </style>
<div class="father">
 <div class="son"></div>
</div>
</body>

块级元素水平和垂直方向居中的方式

标签：display lin line lex margin mon 垂直元素 relative

原文地址：https://www.cnblogs.com/hg845740143/p/12080214.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行