CSS中如何实现水平垂直居中

CSS中如何实现水平垂直居中，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

站在用户的角度思考问题，与客户深入沟通，找到港口网站设计与港口网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、成都做网站、外贸网站建设、企业官网、英文网站、手机端网站、网站推广、空间域名、雅安服务器托管、企业邮箱。业务覆盖港口地区。

1 水平居中

首先讨论一下如何将一个元素进行水平居中。给定以下HTML代码。

<div class='box'>水平居中</div>

通过css实现div的水平居中。

.box{width:300px;height: 300px;margin: 0 auto;}

首选设置box的宽度和高度，然后设置box外边距margin就可以实现水平居中。实现的原理很简单，利用了盒模型来解决这个问题。

box的盒模型水平布局由以下7个属性相加组成。

• margin-left

• border-left

• padding-left

• width

• padding-right

• border-right

• margin-right

假设浏览器的宽度是1080px，那么box的父元素的宽度也是1080px，box想在父元素容器里面实现水平居中，通过设置margin的左右边距就可以实现。但浏览器的宽度不是固定的，要想动态实现水平居中，那么就不能固定设置margin的值。

通过margin:0 auto就可以自动设置左右边距，其代表的意思是，上下外边距为0，左右外边距自动，auto就会自动折半给box设置外边距。

2 水平垂直居中

2.1 方法一

<div class='box'></div>

/* 设置top,bottom,left,right都为0，margin为auto */.box{width:200px;height:200px;background-color:#bra;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

2.2 方法二

<div class='box'></div>

/* 设置margin向负方向移动，移动的距离是box宽高的一半 */.box{width:200px;height:200px;background-color:#bra;position:absolute;left:'50%',right:'50%',margin: -100px -100px;}

2.3 方法三

<div class='box'></div>

/* 通过translate来平移实现，相比于上面哪种方法，可以实现自适应 */.box{width:200px;height:200px;background-color:#bra;position:absolute;left:'50%';right:'50%';transform:translate('50%','50%')}

2.4 方法四

<div class='box'><div class='box1'></div></div>

/* flex布局法，设置水平和垂直居中 */.box{dispaly:flex;align-items:center;justify-content:center;height:1000px;}.box1{width:100px;height:100px;background-color:pink;}

看完上述内容，你们掌握CSS中如何实现水平垂直居中的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

当前名称：CSS中如何实现水平垂直居中
链接URL：https://www.cdcxhl.com/article4/ppjjie.html

成都网站建设公司_创新互联，为您提供商城网站、网站排名、建站公司、用户体验、营销型网站建设、自适应网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联