水平居中
text-align:center;
在其父元素上设置 text-align:center;属性 就可以是文字或者图片水平居中
.content{
text-align:center;
}
margin
给元素设置宽度,利用margin:0 auto;属性进行居中设置;
<style>
.wrap{
max-width:600px;
margin:0 auto;
background:pink;
}
</style>
<div class="wrap">
<p>你好</p>
<h1>不样钓鱼</h1>
</div>
水平居中.png
垂直居中
文字不定宽高居中 利用元素属性 上下padding
相等 text-align:center;
即可实现 实例如下
<style>
.ct{
padding:40px 0;
background:#ccc;
text-align:center;
}
</style>
<div class="ct">
<p>你好</p>
<p>你好请继续加油</p>
</div>
效果图如下
不定宽高.png
绝对定位实现居中
定宽定高 利用绝对定位 相对于自身实现居中 里面的文字内容 利用负margin
实例如下
<style>
html,body{
height:100%;
}
.dialog{
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-200px;
width:400px;
height:300px;
box-shadow:0 0 0 3px #ccc;
}
.header{
background:#000;
color:#fff;
}
.header,.content{
padding:10px;
}
</style>
<div class="dialog">
<div class="header">我是标题</div>
<div class="content">我是内容</div>
</div>
效果图如下 :
image.png还有一种形式是不定宽高
利用css3的属性 transform:translate(-50%,-50%);
相等对于自身,也可以达到同样的 效果 范例如下:
<style>
html,body{
height:100%;
}
.dialog{
position:absolute;
top:50%;
left:50%;
/* margin-left:-150px;
margin-top:-200px;
width:400px;
height:300px; */
transform:translate(-50%,-50%);
box-shadow:0 0 0 3px #ccc;
}
.header{
background:#000;
color:#fff;
}
.header,.content{
padding:10px;
}
</style>
<div class="dialog">
<div class="header">我是标题dfdfdfddd</div>
<div>我是标题dfdfdfddd</div>
<div>我是标题dfdfdfddd</div>
<div class="content">我是内容</div>
</div>
效果图如下 :
css3属性实现居中.png
vertical-align实现居中
原理 利用伪元素 为参照基线 实现垂直对齐 很巧妙
- 使行内元素盒模型与其行内元素容器垂直对齐。例如,用于垂直对齐一行文本的内的图片
<img>
:
<style>
.box{
width:300px;
height:200px;
border:1px solid pink;
text-align:center;/*水平居中*/
vertical-align:middle;
}
/*参照物为基线 实现对齐*/
/* .text{
height:200px;
background:red;
width:3px;
display:inline-block;
vertical-align:middle;
} */
.box:before{
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.box img{
vertical-align:middle;
background:pink;
}
</style>
<div class="box">
<!-- <span class="text"></span> -->
<img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
</div>
利用基线为参照物.png
table-cell实现居中
这个居中方式和上面的差不多 利用display:table-cell
属性 相当巧妙 使代码相当简洁
<style>
.box{
width:300px;
height:200px;
border:1px solid pink;
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
<div class="box">
<img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
</div>
效果图如下
display: flex
弹性布局 实现居中
<style>
.space{
width: 100vw;
height: 100vh; /* 设置宽高以显示居中效果 */
display: flex; /* 弹性布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
body {
margin: 0;
background: rgba(0, 0, 0, .23);
}
.earth::after {
content: '🌏';
font-size: 185px;
}
</style>
<div class="space">
<div class="earth"></div>
</div>
效果图 如下 :
弹性布局居中.png
网友评论