Center CSS (Flex)

Trên diễn đàn đã có nhiều bài hướng dẫn CSS nhưng mình thấy vẫn thiếu một cách quan trọng đó là dùng flex. Vậy nên mình sẽ đưa ra vài ví dụ để các bạn hình dung cách dùng. À mà quên mọi người nếu có thời gian vào vote giùm mình xem bao nhiêu coder còn support IE <11 vì hầu như chỉ có mỗi thằng IE là gây khó khăn trong việc Center nhiều nhất.

Link Vote.

1. Code

index.html

<div class="box">
    <div class="head">
        <h1>Welcome to Kipalog</h1>
    </div>
    <img src="logo.png" alt="logo" />
    <div class="content">
        <div id="post-1">
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
        </div>
        <div id="post-2">
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>

style.css

*{
    margin:0;
    padding:0;
    border:0;
}

body{
    background: rgb(255,255,255);
    height: 100%;
    awidth: 100%;
}

.box{
    position: relative;
    awidth: 20vw;
    height:50vh;
    margin-left:40vw;
    margin-top:25vh;
    border-radius: 5px;
    box-shadow: 0px 10px 15px #acacac;
}
.box .head{
    awidth:100%;
    height:40%;
    display:flex;
    justify-content:center;
    align-items:center;
    background: #ededed;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.box h1{
    font-size:10px;
    text-transform: uppercase;
    color:#acacac;
}
.box img{
    position:relative;
    top:50%;
    left:50%;
    max-awidth:70px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

.box .content{
    awidth:90%;
    margin-left:5%;
    margin-top:-5%;
}

#post-1, #post-2{
    height: 20%;
    margin-bottom:5%;
    padding:5%;
    border-radius:5px;
    color:#acacac;
    background: #ededed;
    text-align: justify;
}

2. Study Case

2.1. Welcome to Kipalog

    display:flex;
    justify-content:center;
    align-items:center;

Ở đây mình sử dụng display:flex.

justify-content sẽ phụ trách horizontal-align còn align-items sẽ phụ trách vertical-align.

2.2. Kipalog's logo

    position:relative; /*may be absolute, depends on the situation.*/
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);

Đây cũng là một cách hay để center. Bạn không quan tâm đến awidth, height. left:50% và top:50% sẽ đưa item vào giữa màn hình, nhưng do bất kì item nào cũng có awidth và height, vì vậy sẽ bị lệch khỏi điểm center. Dùng transform: translate(-50%,-50%)browser sẽ tự động tính toán cho bạn, di chuyển item về trái và lên trên với 1 nửa kích thước item.

Các bạn có thể sử dụng tool này: How to Center
Nên supscribe channel DevTips

Chắc những bạn đọc post này đa số là Web Dev, nên các bạn có thể sử dụng những plugin sau (cho Chrome) tiện cho việc chôm design một cách nghệ thuật:
WhatFont - Dùng để inspect font.
Emmet Re:view - Dùng để inspect view trên viewport khác nhau.
ColorZilla - Dùng để inspect color.

for reading