程序博客网 > 平度市淘宝客服招聘网

HTML中盒子模型上下左右(水平和垂直方向)都居中

来源：互联网发布：平度市淘宝客服招聘网编辑：程序博客网时间：2024/06/05 11:47

有两种方式：

直接上代码：使用定位对div元素进行水平垂直居中，效果如下：

第一种：

<style type="text/css">
*{margin:0;padding:0;}
.box{width:200px;height:200px;background:red;position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px;}
</style>
</head>
<body>
<div class="box"></div>
</body>

这样明显没有居中，原因是使用left:50%,top:50%;是对其左上角进行居中，现在使用margin-top:-100px;margin-left:-100px;就OK了（就是针对其对角线交点居中）。

第二种：

这种方法就是对top:0;right:0;bottom:0;left:0;在使用margin:0 auto;也可以进行水平垂直居中。

0 0

平度市淘宝客服招聘网

平度市淘宝客服招聘网

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子去北戴河旅游攻略北戴河哪里好玩北戴河农家院住宿北京北戴河北戴河秦皇岛北戴河宾馆北戴河景点介绍南北戴河北戴河两日游攻略西安到北戴河北戴河房产北戴河别墅北戴河有哪些景点北戴河自由行北戴河介绍天津到北戴河北戴河旅游北戴河旅游景点有哪些北京到北戴河火车时刻表北戴河到北京火车时刻表北戴河在哪个省哪个市北戴河房子千万不要买北戴河属于哪个城市 2019北戴河海水涨退潮时间表北戴河机场大巴时刻表北戴河一日游必去景点北戴河机场航班时刻表北戴河属于哪个省市去北戴河旅游多少钱秦皇岛北戴河旅游攻略北戴河旅游景点介绍秦皇岛北戴河旅游景点北戴河临海住宿别墅北戴河刘庄家庭旅馆去北戴河住哪里比较方便北戴河旅游攻略二日游北戴河旅游攻略三日游北戴河旅游景点大全北京到北戴河多少公里北戴河夜市小吃一条街北戴河旅游攻略必玩的景点