5213566.html

来源：互联网发布：淘宝店铺商品分类编辑：程序博客网时间：2024/05/18 02:41

CSS未知宽高元素水平垂直居中

方法一
思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中
优点：父元素（parent）可以动态的改变高度（table元素的特性）
缺点：IE8以下不支持

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>未知宽高元素水平垂直居中</title></head><style>.parent1{    display: table;    height:300px;    width: 300px;    background-color: #FD0C70;}.parent1 .child{    display: table-cell;    vertical-align: middle;    text-align: center;    color: #fff;    font-size: 16px;}</style><body>    <div class="parent1">        <div class="child">hello world-1</div>    </div></body></html>

方法二：

思路：使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0
缺点：多了一个没用的空标签，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。
当然也可以使用伪元素来代替span标签，不过IE支持也不好，但这是后话了

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>未知宽高元素水平垂直居中</title></head><style>.parent2{    height:300px;    width: 300px;    text-align: center;    background: #FD0C70;}.parent2 span{    display: inline-block;;    width: 0;    height: 100%;    vertical-align: middle;    zoom: 1;/*BFC*/    *display: inline;}.parent2 .child{    display: inline-block;    color: #fff;    zoom: 1;/*BFC*/    *display: inline;}</style><body>    <div class="parent1">        <div class="child">hello world-1</div>    </div>    <div class="parent2">        <span></span>        <div class="child">hello world-2</div>    </div></body></html>

方法三

思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>未知宽高元素水平垂直居中</title></head><style>.parent3{    position: relative;    height:300px;    width: 300px;    background: #FD0C70;}.parent3 .child{    position: absolute;    top: 50%;    left: 50%;    color: #fff;    transform: translate(-50%, -50%);}</style><body><div class="parent3">        <div class="child">hello world-3</div>    </div></body></html>

方法四：
思路：使用css3 flex布局
优点：简单快捷
缺点：兼容不好吧，详情见：http://caniuse.com/#search=flex

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>未知宽高元素水平垂直居中</title></head><style>.parent4{    display: flex;    justify-content: center;    align-items: center;    width: 300px;    height:300px;    background: #FD0C70;}.parent4 .child{    color:#fff;}</style><body>div> <div class="parent4">        <div class="child">hello world-4</div>    </div></body></html>

    </div>    <div class = "postDesc">posted @ <span id="post-date">2016-02-24 16:53</span> <a href='http://www.cnblogs.com/jogen/'>卡莫</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>)  <a href ="https://i.cnblogs.com/EditPosts.aspx?postid=5213566" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(5213566);return false;">收藏</a></div></div><script type="text/javascript">var allowComments=true,cb_blogId=265616,cb_entryId=5213566,cb_blogApp=currentBlogApp,cb_blogUserGuid='9bbb9f36-5960-e511-b908-9dcfd8948a71',cb_entryCreatedDate='2016/2/24 16:53:00';loadViewCount(cb_entryId);</script>

刷新评论刷新页面返回顶部

fixPostBody(); setTimeout(function () { incrementViewCount(cb_entryId); }, 50); deliverAdT2(); deliverAdC1(); deliverAdC2(); loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid); GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate); loadOptUnderPost(); GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);

</div><!--end: forFlow --></div><!--end: mainContent 主体内容容器--><div id="sideBar">    <div id="sideBarMain">

公告

        <div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script>        <div id="leftcontentcontainer">            <div id="blog-sidecolumn"></div><script type="text/javascript">loadBlogSideColumn();</script>        </div>    </div><!--end: sideBarMain --></div><!--end: sideBar 侧边栏容器 --><div class="clear"></div></div><!--end: main --><div class="clear"></div><div id="footer">

阅读全文

0 0