Center CSS (Flex)
CSS3
43
HTML5
26
Flex
2
Male avatar

danhphan1307 viết ngày 12/01/2017

Giới thiệu

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.

Nội dung

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%;
    width: 100%;
}

.box{
    position: relative;
    width: 20vw;
    height:50vh;
    margin-left:40vw;
    margin-top:25vh;
    border-radius: 5px;
    box-shadow: 0px 10px 15px #acacac;
}
.box .head{
    width: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-width:70px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

.box .content{
    width: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;
}

alt text

2. Study Case

2.1. Welcome to Kipalog

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

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

Attribute Result
justify-content:center text will be align center (horizontally)
justify-content:flex-end text will be align right (horizontally)
align-items:center text will be align center (vertically)
align-items:flex-end text will be align right (vertically)

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 width, height. left:50%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ó width 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.

Tham khảo

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

Bonus

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.

alt text

for reading

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

danhphan1307

2 bài viết.
12 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
12 3
Lời ngỏ Đây là series giới thiệu cơ bản về FreeRTOS trên CortexM3, cụ thể là LPC 1549. Dự kiến series sẽ gồm 8 bài viết nhằm giới thiệu với các bạ...
danhphan1307 viết hơn 1 năm trước
12 3
Bài viết liên quan
White
33 14
Trước đây việc dàn bố cục trang (layout) chủ yếu dựa vào những công cụ thô sơ thời đồ đá, ví dụ để cho 2 đoạn văn ở 2 bên của trang thì người ta sẽ...
mòe viết 3 tháng trước
33 14
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
12 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!