[CSS] Tổng hợp Canh giữa màn hình của div - Center div align horizontal

[tthlan]

[CSS] Tổng hợp Canh giữa màn hình của div - Center div align horizontal

Note lại kẻo lại quên canh giữa thường là của paragraph

Code: Select all

<style>
.parCenter
{
	text-align: center;
}<style>

Code: Select all

<p class="parCenter"> tthlan.info - canh giữa <p></p>

Nhưng với div thường text-align bị vô hiệu thì có thể sử dụng cách sau:

Cách 1 có hoặc không có width thì dùng với display: table và margin: auto

Code: Select all

<style>
.divTable
{
	height:200px;
	/* width:40%; */
	background: #cdcdcd;	
	display:table;
	margin:auto;
}
</style>

Code: Select all

<div class="divTable"><div class="divChild"> tthlan.info - canh giữa <div></div></div>

Cách 2: phải có width thì dùng với display: block và margin: 0 auto (- margin-left:auto, margin-right:auto)

Code: Select all

<style>
.divBlock
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	background:  #29679a;
	width:200px; // important
	height: 100px;
}
</style>

Code: Select all

<div class="divBlock"> tthlan.info - canh giữa <div></div>

Cách 3: với display:flex và justify-content: center nhưng lúc này width được chỉ định thì chỉ center trong div, width không được chỉnh thì center theo chiều ngang màn hình.

Code: Select all

<style>.divFlex
{
	display: flex;
  	justify-content: center;
	background:  #29679a;
	height: 100px;
	/* width: 800px // center trong div */
}
</style>

Code: Select all

<div class="divFlex"> tthlan.info - canh giữa <div></div>

Chúc bạn thành công!