Responsive CSS square with centered text

CSS

40

Responsive

3

vertical center

1

Toan Nguyen viết ngày 10/07/2015

Sau đây là cách để tạo một square div và canh giữa theo chiều dọc bằng css. Đây là cách làm rất hay, hỗ trợ được những browser đời cũ như IE8 mà ko cần phải dùng javascript.

Square div

HTML

<div class='square-box'>
    <div class='square-content'>Nội dung ở đây</div>
</div>

CSS

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD; /** có màu để dễ xem **/
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
}

Centered text

HTML

<div class="center-text">
    <span>Nội dung ở đây</span>
</div>

CSS

.center-text{
    display: table;
    width: 200px;
    height: 200px;
    /** có màu vô cho dễ xem **/
    background: #4679BD;
    color: #fff;
}
.center-text span{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Sample: