Center CSS (Flex)
CSS3
24
HTML5
12
Flex
1
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
11 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 1 năm trước
11 3
Bài viết liên quan
White
21 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
21 8
{{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á!