CSS: Позиционирование по центру контейнера
Позиционирование блока по центру контейнера по горизонтали, вертикали.
Проверить код на jsfiddle.net
<div class="parent"> <div class="child"></div> </div> <style> .parent { width: 100px; height: 100px; position: relative; background: blue; float: left; margin: 10px; } .child { width: 50px; height: 50px; background: red; text-align: center; line-height: 50px; font-size: 30px; font-weight: bold; } .parent.var--1{ } .parent.var--1 .child, .parent.var--2 .child, .parent.var--3 .child{ position: absolute; background: red; } // 1 вариант .parent.var--1 .child{ left: calc( 50% - 25px ); top: calc( 50% - 25px ); } // 2 вариант .parent.var--2 .child{ left: 50%; top: 50%; transform: translateX( -50% ) translateY( -50% ); } // 3 вариант (сокращённая версия 2) .parent.var--3 .child{ left: 50%; top: 50%; transform: translate(-50%, -50%); } // 4 вариант .parent.var--4 { display: flex; justify-content: center; align-items: center; background: blue; } .parent.var--4 .child { width: 50px; height: 50px; background: red; } // 5 вариант .parent.var--5 { height: 100px; display: grid; place-items: center; background: blue; } .parent.var--5 .child { width: 50px; height: 50px; background: red; } // 6 вариант .parent.var--6 { height: 100px; display: grid; background: blue; } .parent.var--6 .child { margin: auto; width: 50px; height: 50px; background: red; } </style>