Мой Справочник | CSS3

Мой Справочник | CSS3 | Центровка

margin
Блочная центровка с помощью margin Выравнивает только по горизонтали	`.sample1 { margin: 0 auto; }`
	`.sample1 { margin: 0 auto; }`
inline-block
Центровка с помощью inline-block Выравнивает только по горизонтали	`Свойства для контейнера: .cont-sample4 { text-align: center; }Свойства для элемента: .sample4 { display: inline-block; vertical-align: middle; }`

position + margin
Центровка с помощью position margin-top и margin-left ОТРИЦАТЕЛЬНЫ и равны половине ВЫСОТЫ и ШИРИНЫ соответственно	`.sample2 { height: 60px; width: 60px; position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; }`

position + transform
Центровка с помощью transform и position	`.sample3 { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }`
Центровка с помощью transform и position
flex
Центровка с помощью flexbox Центровка контента и не важно какая ширина и высота у контейнера	Свойства для контейнера: `.cont-sample5 { display: flex; justify-content: center; align-items: center; }`