HTML+CSS文字、元素整体(水平垂直)居中

1.以下我们使用简单的CSS代码实现文字、元素的水平垂直居中
CSS样式:
<style type="text/css">
    .horizontal-center {
        margin: 0 auto;
        border: solid #6AC5AC 3px;
        width: 50%;
        height: 300px;
        text-align: center;
        line-height: 300px;
        vertical-align: middle;
    }
    .vertical-container {
        margin-top: 20px;
        border: solid #6AC5AC 3px;
        height: 300px;
        text-align: center;
    }
    .spcontainer {
        top: 35%;
        padding: 20px;
        display: inline-block;
        position: relative;
        border: solid #ffcc66 3px;
    }
    .label {
        top: 0;
        left: 0;
    }
    .endlabel {
        bottom: 0;
        right: 0;
    }
    .label, .endlabel {
        position: absolute;
        color: #ffffff;
        background: #ffcc66;
    }
</style>
HTML:
<div class="horizontal-center">
    外元素、内文字整体水平居中
</div>

<div class="vertical-container">
    <div class="spcontainer">
        <span class="label">&lt;div&gt;</span>
        内元素CSS里总算是有了一种简单的水平垂直居中布局的方法了!
        <span class="endlabel">&lt;/div&gt;</span>
    </div>
</div>

实现效果参考本站:

文字、元素水平垂直居中

2.最新的CSS3(Flexbox 的居中布局)实现文字、元素的水平垂直居中:

参考:http://zh.learnlayout.com/flexbox.html

0 Comments

Leave a comment