div居中显示

来源：互联网发布：知名网络小说家编辑：程序博客网时间：2024/06/07 20:39
以下是div居中显示的3种方法：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>/*-- 1.vertical-align居中 */img {    vertical-align: middle;}/*vertical-align  div居中*/.div_out {    border: 1px solid red;    height: 100px;    vertical-align: middle;    display: table-cell;}.div_inner {    background-color: gray;    height: 60px;    width: 150px;}/*===vertical-align  span居中 必须设置display: table-cell和vertical-align: middle;才可居中====*/.myspan {    margin: 0px;    padding: 0px;    display: table-cell;    height: 100px;    border: 1px solid red;    vertical-align: middle;    text-align: center;}/*-----------line-height=height居中------------------*/.p_txt {    background-color: #cccccc;    text-align: center;    height: 50px;    line-height: 50px;}/*-----------------------------*//*===================================*/.my-parent {    height: 200px;    width: 100%;    /*parent必须是position: relative;*/    position: relative;    border: 1px solid red;}.my-body {    border: 1px solid red;    height: 150px;    width: 200px;    /*body必须是position: absolute;*/    position: absolute;    top: 50%;    left: 50%;    -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);}/*===================================*/</style></head><body>    <!--    1.    在CSS中还有一个display 属性能够模拟<table>，所以我们可以使用这个属性    来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和     display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上    但是Internet Explorer 6及以下的版本中是无效的；    -->    <!--div用 display: table-cell 和vertical-align: middle居中 -->    <!-- .vertical-align居中 -->    <div>        <img src="http://tb.himg.baidu.com/sys/portrait/item/8a5a626f796974309906" height="100" /> <img            src="http://tb.himg.baidu.com/sys/portrait/item/8a5a626f796974309906" height="50" /> <span>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>    </div>    <br>    <!-- vertical-align div居中 ----------------------------------------------------------------------->    <br>    <div class="div_out">        <div class="div_inner"></div>    </div>    <br>    <!-- vertical-align span居中 ------------------------------------------------------------------------->    <span class="myspan">在我们要使这段文字垂直居中显示！</span>    <br>    <hr>    <br>    <!--2.height =  line-height居中 ------------------------------------------------------------------------->    <div class="p_txt">哈哈哈哈哈发货哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>    <br>    <hr>    <br>    <!--3.transform居中 ------------------------------------------------------------------------------------->    <div class="my-parent">        <div class="my-body">哈哈哈哈哈哈哈哈发货哈哈哈哈哈哈哈发货哈哈哈哈哈            哈哈哈哈哈发货哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈发货哈哈哈哈哈哈哈哈哈哈哈哈哈</div>    </div>    <br>    <hr>    <br></body></html>
1 0