css center

CSS Layout - Horizontal & Vertical Align, Center Align Elements, Center Align Text, Center an Image, Left and Right Align - Using position, The clearfix Hack

css center

最常见的水平垂直居中实现方案

使用 flex布局, flex 居中

.parent class: flex justify-center items-center h-80

.child class:

Chind content, In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

To horizontally center a block element, use margin: auto; 水平居中

.parent class:

.child class: m-auto w-20

Hello World!

Center an Image, set left and right margin to auto and make it into a block element:

.parent class:

.child class: m-auto w-1/2 block

Left and Right Align - Using position:

.parent class: relative

.child class: absolute w-1/3 right-0

Chind content, In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Left and Right Align - Using float

.parent class:

.child class: float-right w-1/3

Chind content, In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

clearfix hack/ flow-root

Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the "clearfix hack" to fix this (see example below).

In tailwind, the clearfix class has been removed since flow-root is a simpler solution to the same problem in modern browsers.

.parent class: flow-root

.child class: float-right w-1/3

Chind content, In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

Center Vertically - Using position & transform

.parent class: relative h-80

.child class: absolute w-1/3 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2

Chind content, In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

星座

css effect