居中分为水平居中,垂直居中,水平-垂直居中三中情况。div居中
三种居中 1(!!!!重要):利用定位、left、margin来确定(left等定位属性,要使用时,它必需是已定位的元素(absolute,relative,fixed))
margin:0 auto;
//上外边距和下外边距是 0,右外边距和左外边距是 居中.表示横居中,竖不居中
margin:auto 0;
//上外边距和下外边距是 auto,右外边距和左外边距是 0
margin:auto;
//表示横竖都居中
margin:0 auto; 相同于 top:0;bottom:0;margin:auto ,但必须加上定位
三种定位2:flex布局 ,父元素设置 display: flex;以及居中,子元素不做处理
一、水平居中
1、外边距自适应:margin:0 auto;
<style>
center_text{
display:block;
width:500px;
margin:0 auto;
}
</style>
<div class="center">
<span class="center_text">
我是行内元素,但我要居中必须是块级元素,所以我给自己设了display:block
注意点:要求内部元素(.content_text)是块级元素,并且不能脱离文档流(如设置position:absolute),否则无效。
</span>
</div>
2、text-align:center方式
<style>
.center{
text-align:center;
}
center_text{
display:inline-block;
width:500px;
}
</style>
<div class="center">
<span class="center_text">
text-align:center可以水平居中块级元素中的行内元素,如inline,inline-block;
</span>
</div>
3、flex布局:justify-content:center;
<style>
.div-parent {
width: 400px;
height: 200px;
background-color: #aaa;
display: flex;
justify-content: center;
}
.div-child {
width: 80px;
height: 50px;
background-color: #007FFF;
}
</style>
<div class="div-parent">
<div class="div-child">
父级元素设置为flex容器 display: flex;justify-content:center;
子一级元素不做特别处理
</div>
</div>
二、垂直居中
1、flex布局:align-items:center;
<style>
.div-parent {
width: 400px;
height: 200px;
background-color: #aaa;
display: flex;
align-items:center;
}
.div-child {
width: 80px;
height: 50px;
background-color: #007FFF;
}
</style>
<div class="div-parent">
<div class="div-child">
父级元素设置为flex容器 display: flex;align-items:center;
子一级元素不做特别处理
</div>
</div>
2、定位
<style>
.div-parent {
width: 400px;
height: 200px;
background-color: #aaa;
position:relative;
}
.div-child {
width: 80px;
height: 50px;
background-color: #007FFF;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto 0;
}
</style>
<div class="div-parent">
<div class="div-child">
父级元素添加属性:position:relative;
子一级添加属性:position: absolute; margin: auto 0;
</div>
</div>
3、内边距:父级元素设置内边距:padding-top: 80px;
<style>
.div-parent {
width: 400px;
height: 200px;
background-color: #aaa;
padding-top:80px;
}
.div-child {
width: 80px;
height: 50px;
background-color: #007FFF;
}
</style>
<div class="div-parent">
<div class="div-child">
样例已知父级元素高度。也可用用比例设置。
</div>
</div>
三、水平垂直居中
1、绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中方式3</title>
<style>
/*使用绝对定位,确定了子div的宽高,left、right、top、bottom都设置为0,margin设置为auto*/
.father {
background: red;
width: 500px;
height: 500px;
position: relative;
}
.son {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
margin:auto是指上下左右全都auto
margin:0 auto 是指上下是0,左右auto
</div>
</div>
</body>
</html>
2、flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中方式4</title>
<style>
/*使用flex布局,为父div添加flex布局样式align-items和justify-content*/
.father {
background: red;
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.son {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素不操作</div>
</div>
</body>
</html>
3、使用css3的translate水平垂直居中元素 :这种方式将脱离文档流的元素
<style>
.center {
position: relative;
width: 960px;
height: 500px;
background: #1879D9;
}
.center_text{
position: absolute;
top: 50%;/*如果把这几行删掉,不可以居中 */
left: 50%;
transform: translate(-50%, -50%);
}
<style>
<div class="center">
<div class="center_text">
当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置,
translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。
</div>
</div>
四、图片居中
background:url(..) no-repeat center