[css]总结-如何实现水平垂直都居中对齐?
行内元素,行内块元素 水平对齐: text-align:center;
块元素水平对齐: margin:0 auto;
居中对齐: 水平方向,垂直方向都对齐.
垂直方向居中对齐比较麻烦.具体见下面.
普通盒子-居中对齐: 方式一
思路:让外面的元素outer只有一行.
内部要居中的元素改为非块元素. 因为vertical-align对块元素无效. 然后用vertical-align:middle;实现垂直居中.
代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer {
width: 400px;
height: 280px;
line-height: 280px; /* 关键. 让外部容器只有一行. */
background-color: #cccccc;
text-align: center; /* 内容水平居中 */
}
.inner {
width: 140px;
height: 60px;
background-color: limegreen;
font-size: 40px;
line-height: 60px;
display: inline; /* 改为行内 或 行内块 */
vertical-align: middle; /* 因为vertical-align对块元素无效 */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>
普通盒子-居中对齐: 方式二
思路: 计算内部需要对齐元素的margi-top: (父高-自身高)/2;
前提条件: 父元素高度,自身高度要明确给定.
且内部元素要能设置宽高.那就不能是行内元素
代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer {
width: 400px;
height: 280px;
background-color: #cccccc;
text-align: center;/* 水平居中 */
}
.inner {
height: 60px;
background-color: limegreen;
font-size: 40px;
line-height: 60px;
display: inline-block; /* inner所在元素是span,默认是inline,对行内元素设置宽高无效 */
margin-top: 110px; /* (280-60)/2=110px */
}
</style>
</head>
<body>
<div class="outer">
<span class="inner">你好啊</span>
</div>
</body>
</html>
普通盒子-居中对齐: 方式三
思路: 和上面类似.但是改为计算父元素的padding-top.
padding会撑开父元素高度. 再给父元素总高度减去 padding-top的数值 赋回去.
padding-top数值计算方法:
父元素内容区高度-子元素总体高度/2
其中: 子元素总体高度=内容区高度+上下边框高度+上下内边距高度
代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer {
width: 400px;
/*父元素原高度 height: 280px . */
/*padding-top=(280-60)/2=110px */
/* 加上padding-top还想让父元素不被撑高. 280-padding-top=170px */
height: 170px;
background-color: #ccc;
text-align: center;
padding-top:100px;
}
.inner {
height:60px;
background-color: limegreen;
font-size: 40px;
border: 1px solid black;
box-sizing: border-box; /* 子元素总高度就等于height.为了偷懒好计算 */
}
</style>
</head>
<body>
<div class="outer">
<span class="inner">你好啊</span>
</div>
</body>
</html>
普通盒子-居中对齐: 方式四 -定位1
思路: 自绝父相---让父容器成为子元素的包含块
定位,用2D位移
优点: 不用繁琐的计算margin,padding. 也不用必须知道子元素的宽高.
代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer {
width: 400px;
height: 280px;
background-color: #ccc;
position: relative;
}
.inner {
background-color: limegreen;
position: absolute;
/* 块元素居中. 用定位,配合位移 */
left: 50%;
top: 50%; /* 相对父元素取一半 */
/* 位移函数参数百分比.是参照自身的宽高 */
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>
普通盒子-居中对齐: 方式五 -定位2
思路: 定位,自动margin
注意: 子元素宽高要已给定
代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer {
width: 400px;
height: 280px;
background-color: #ccc;
position: relative;
}
.inner {
width: 140px;
height: 60px;
background-color: limegreen;
font-size: 40px;
line-height: 60px;
position: absolute;
/* 下面代码是居中关键 */
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>
弹性盒子-居中对齐:方式一
思路: 弹性容器 主轴,侧轴对齐方式都设置为center
代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer {
width: 400px;
height: 280px;
background-color: #ccc;
display: flex;
justify-content: center;/* 调整主轴 居中对齐 */
align-items: center; /* 只有一行时,调整侧轴居中对齐 */
}
.inner {
width: 140px;
height: 60px;
background-color: limegreen;
}
</style>
</head>
<body>
<div class="outer">
<span class="inner"></span>
</div>
</body>
</html>
弹性盒子-居中对齐:方式二
思路: 弹性项目自动分配margin
代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer {
width: 400px;
height: 280px;
background-color: #ccc;
display: flex; /* 关键1 */
}
.inner {
background-color: limegreen;
text-align: center;
margin:auto;/* 关键2 */
}
</style>
</head>
<body>
<div class="outer">
<span class="inner">你好啊</span>
</div>
</body>
</html>
弹性盒子-居中对齐:方式三
应用场景: 不知道父容器高度.或父容器高度随时可能变化.
代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer {
display: flex;
justify-content: center; /* 水平居中 */
height: calc(100vh); /* 计算获得屏幕高度 */
align-items: center; /* 垂直居中 */
}
.inner {
width: 800px;
height: 400px;
border-radius: 4px;
background-color: limegreen;
}
</style>
</head>
<body>
<div class="outer">
<!--不论行内,行内块,块元素都能通过此方式对齐-->
<div class="inner"></div> 块
<!--<span class="inner"></span> 行内-->
<!--<img class="inner" src="../images/girl.jpg" alt=""> 行内块-->
</div>
</body>
</html>
浙公网安备 33010602011771号