1. margin auto 与垂直居中
关于垂直居中的方式
方式1：
利用父元素position:relative和子元素position:absolute; left: 50%; top: 50%;,然后再计算margin-left为负的子元素的width的一半，margin-top为负的子元素的height的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中的方式</title>
<style>
.outer {
position: relative;
width: 200px;
height: 100px;
border: 2px solid #dddddd;
}
.inner {
position: absolute;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -25px;
background: #abcdef;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
展示结果
image1.png
方式2：
采用css3的新特性transform:translate(-50%, -50%),表示向上，向左移动自身元素的50%，这种方式相对方式1的好处是不需要提前知道子元素的宽度，高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中的方式</title>
<style>
.outer {
position: relative;
width: 200px;
height: 100px;
border: 2px solid #dddddd;
}
.inner {
position: absolute;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #abcdef;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
展示结果
image2.png
方式3: 本文重点要提到的内容
重点是设置了
left:0; right:0; top:0; bottom:0以及margin:auto
引用
当一个绝对属性元素，其对立定位方向属性同时存在具体数值时，其流体性就体现出来了
具有流体特性的绝对定位元素的margin:auto的填充规则和普通流体元素一模一样
1. 如果一侧是定值，一个是auto，auto为剩余空间大小；
2. 如果两侧均为auto，则平分剩余空间
注： 流体元素：就是指普通的html元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin auto 实现垂直居中</title>
<style>
.container{
position: relative;
width: 300px;
height: 200px;
background: #abcedf;
}
.element {
width: 100px;
height: 50px;
border: 1px solid #fff;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="element"></div>
</div>
</body>
</html>
展示结果
image3.png
关于属性百分比的计算
参见css属性百分比的计算
此部分内容参考张鑫旭老师的文章
2.margin auto与flex布局
在flex布局中使用margin: auto可以实现flex item的垂直，水平居中，和左右居中等，详细原理参考flex布局算法,简单来说就是margin:auto会优先于justify-content,align-items等设置水平排列，垂直排列方式的属性生效，将flex items以外的所有剩余空间占据
举例1：
margin:auto实现垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex margin</title>
<style>
.wrap{
display: flex;
width: 600px;
height: 300px;
margin: 0 auto;
box-sizing: border-box;
box-shadow: 0 0 20px 0 #ddd;
border: 1px solid #ddd;
}
.item{
width: 100px;
height: 100px;
margin: auto;
}
.item1{
background: #75deef;
}
.item2{
background: #66efab;
}
.item3{
background: #ef9fef;
}
.item4{
background: #ef6754;
}
.item5{
background: #efe24e;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
<div class="item item5">item5</div>
</div>
</body>
</html>
展示结果
image1.png
举例2：
margin auto左右分栏展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex margin</title>
<style>
.wrap{
display: flex;
height: 300px;
margin: 0 auto;
box-sizing: border-box;
box-shadow: 0 0 20px 0 #ddd;
border: 1px solid #ddd;
}
.item{
width: 100px;
height: 100px;
margin: auto 0;
}
.item1{
background: #75deef;
}
.item2{
background: #66efab;
}
.item3{
background: #ef9fef;
}
.item4{
background: #ef6754;
}
.item5{
background: #efe24e;
margin-left: auto;
}
.item:not(:last-child){
margin-right: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
<div class="item item5">item5</div>
</div>
</body>
</html>
展示结果
image2.png
此部分内容参考蜂蜜柚子茶简书的文章
本文目的仅仅是为了个人查找阅读等提供方便
网友评论