html+css实现div居中的8种方法
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
水平居中
1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式
<div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;">
<span>行级元素</span>
</div>
2.块级元素：为其自身设置margin:auto样式
<div style="width: 500px;height: 100px;border: 1px solid red;">
<div style="line-height: 100px;text-align: center;margin:auto;width: 100px;height: 100px;border: 1px solid gold">
块级元素
</div>
</div>
垂直居中
方法一：
display:table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符.
display:table-cell;此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
<div style="display: table;width: 500px;height: 200px;border: 1px solid red;">
<div style="display: table-cell;vertical-align: middle;text-align:center;">块级元素</div>
</div>
方法二：
利用flex布局使内部块级元素水平，垂直居中（display:flex;justify-content: center; align-items:center;）
<div style="display:flex;justify-content: center; align-items:center; width: 500px;height: 200px;border: 1px solid green;text-align:center;line-height:100px ">
<div style="width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>
方法三：
利用定位实现，父元素：position:relative; ，子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
块级元素
</div>
</div>
方法四：
绝对定位， left：50%，top: 50% + margin-left:-(自身宽度的一半),margin-top:-(自身高度的一半)
缺点：要自己计算容器的宽高，万一容器的宽高改变还要修改css样式
<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
<div style="position:absolute;top:50%;left:50%;margin-left: -50px;margin-top: -50px;
width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
块级元素
</div>
</div>
方法五：
绝对定位，left: 0，right: 0, top: 0, bottom: 0 + margin：auto
<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
<div style="position:absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
块级元素
</div>
</div>
方法六：
固定定位position:fixed;并设置一个较大的z-index层叠属性值
<div style="position:fixed;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;z-index: 999;
width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
块级元素
</div>
方法七：
要把元素相对于视口进行居中，那么相当于父元素的高度就是视口的高度，视口的高度可以用vh来获取：
<div style="margin: 50vh auto 0;transform: translateY(-50%);line-height:100px
width: 100px;height: 100px;border: 1px solid gold;text-align:center;">
块级元素
</div>
方法八：
Flex加margin:auto
<div style="display: flex;width: 500px;height: 200px;border: 1px solid red;">
<div style="margin: auto;width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
块级元素
</div>
</div>
到此这篇关于html+css实现div居中的8种方法的文章就介绍到这了,更多相关html+css实现div居中内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
本文通过实例代码给大家分享了css实现div居中的方法，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下2018-01-30- 这篇文章主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-05
- 这篇文章主要介绍了CSS文本和div垂直居中方法总结，包括多行文本垂直居中,单行文本垂直居中,子div垂直居中，感兴趣的小伙伴们可以参考一下2016-07-04
- 这篇文章主要为大家详细介绍了CSS教程之div垂直居中的多种方法，还包括多行文本垂直居中的方法，感兴趣的小伙伴们可以参考一下2016-05-05
- 这篇文章主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下2014-04-17
最新评论