Hướng dẫn căn giữa trong Css

Căn giữa theo chiều ngang

Element định dạng inline, inline-block, inline

Nếu bạn có 1 element với định dạng là inline, inline-block, inline-table, inline-flex..., bạn có thể dùng:

.center-me {
    display: inline; /* Có thể dùng với inline, inline-block, inline-table, inline-flex ... */
    text-align: center;
    width: 300px; /* Nếu width là 100% thì không cần phải căn giữa */
}

Element định dạng block

Nếu element đó dạng block:

.center-me {
    display: block; /* Nếu đã là định dạng block thì không cần */
    margin: 0 auto;
    width: 300px; /* Nếu width là 100% thì không cần phải căn giữa */
}

Position kết hợp TranslateX

.center-me { 
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Sử dụng FlexBox

Dùng Flexbox: Áp dụng css này cho thẻ bao ngoài, nội dung bên trong thẻ sẽ được căn giữa

.parent {
    display: flex;
    justify-content: center;
}

Căn giữa theo chiều dọc

Nếu element đó dạng inline, inline-block

Nếu chỉ có 1 dòng

.center-me {
    padding-top: 30px;
    padding-bottom: 30px;
}

Tuy nhiên một số trường hợp không thể dùng padding thì bạn có thể thử cách tiếp theo

.center-me {
    height: 100px;
    line-height: 100px;
    white-space: nowrap;
}

Nếu như có nhiều dòng

Sử dụng dạng table với vertical-align: middle;

.parent {
    display: table;
    height: 250px;
    width: 240px;
}
.parent .child {
    display: table-cell;
    background: black;
    color: white;
    vertical-align: middle;
}

Sử dụng FlexBox

.flex-center-vertically {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 400px;
}

Sử dụng ::before

.parent {
    position: relative;
    background: red;
    width: 240px;
    height: 300px;
}
.parent::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.parent .child {
    display: inline-block;
    vertical-align: middle;
    width: 230px;
    background: white;
}

Nếu element đó dạng block

Nếu bạn biết chiều cao của element đó

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}

Nếu bạn không biết chiều cao của element đó

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Sử dụng CSS3 FlexBox

.parent { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

Căn giữa theo cả 2 chiều ngang và dọc

Bạn có thể kết hợp các kỹ thuật ở trên để có thể căn giữa 1 đối tượng theo cả chiều ngang và chiều dọc. Dưới đây là những ví dụ trong từng trường hợp:

Nếu element có chiều cao và chiều rộng cố định

.parent {
    position: relative;
}

.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

Nếu element không biết chiều cao và chiều rộng

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Sử dụng FlexBox

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

Nguồn: css-tricks.com

Thứ sáu, 31/10/2014, 15:50 GMT+7