CSS中实现各类居中的方法代码详解

发布时间：2022-04-20 09:33:00 所属栏目：语言来源：互联网

导读：我们在做前端设计网站页面时，经常需要对文字或者图片等等进行居中处理，那么对于CSS中的各种居中要如何实现？下面是具体的实现代码，希望对在学习CSS/HTML的朋友有所帮助。首先是水平居中，最简单的办法当然就是。复制代码代码如下: margin:0 auto; 也就

我们在做前端设计网站页面时，经常需要对文字或者图片等等进行居中处理，那么对于CSS中的各种居中要如何实现？下面是具体的实现代码，希望对在学习CSS/HTML的朋友有所帮助。

       首先是水平居中，最简单的办法当然就是。

       复制代码代码如下: margin:0 auto;

       也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。

       那么其他的办法呢？容我一一道来：

       line-height

       首先介绍文字的水平居中方法：

       复制代码代码如下: <div class="wrap">刘放</div>

       利用line-height设为height的一样即可：

       复制代码代码如下: .wrap{
  line-height: 200px;/*垂直居中关键*/
  text-align:center;
  height: 200px;
  font-size: 36px;
  background-color: #ccc;
       }

       通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿，再利用padding设为外div减去内div的差的一半，来实现：

.parent{
margin:0 auto;
width:200px;
height:200px;
background-color:red;
}
.children {
width: 100px;
height: 100px;
padding: 50px;
background-color: black;
background-clip:content-box;/*居中的关键*/
       效果如下：

       margin填充

       接下来介绍margin填充的方式来实现水平垂直居中。
       首先我们还是定义父子div：

       <div class="parent">
         <div class="children"></div>
       </div>

       这里我们利用将子div的margin-top设置为父div高度减去子div高度的一半，然后再通过overflow设置为hidden来触发父div的BFC，LESS代码如下：

@parentWidth:200px;
@childrenWidth:50px;
.parent {
margin:0 auto;
height:@parentWidth;
width:@parentWidth;
background: red;
overflow:hidden;/*触发BFC*/
}
.children {
height:@childrenWidth;
width:@childrenWidth;
margin-left:auto;
margin-right:auto;
margin-top: (@parentWidth - @childrenWidth) / 2;
background:black;

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Tomcat下载和安置	装饰器模式装饰设计模
无用单元采集垃圾回收	Java访问对象的属性和