The HTML element is a block-level element that displays its block-level or inline contents centred horizontally within its containing element. The container is usually but isn’t required to be, <body>.
This tag has been deprecated in HTML 4, HTML 5 in favour of the CSS text-align, display: flex-box property, which can be applied to the <div> element or to an individual <p>. For centering blocks, use other CSS properties like margin-left and margin-right and set them to auto (or set margin to 0 auto).
Centring Things
A common task for CSS is to centre text or images. In fact, there are three kinds of centring:
- Centring lines of text
- Centring a block of text or an image
- Centring a block or an image vertically
Centring Lines Of Text
The most common and easiest type of centring is that of lines of text in a paragraph or in a heading. CSS has the property ‘text-align for that:
P { text-align: center }
H2 { text-align: center }
Centring A Block Or Image
Sometimes it is not the text that needs to be centred, but the block as a whole. Or, phrased differently: we want the left and right margin to be equal. The way to do that is to set the margins to ‘auto’. This is normally used with a block of fixed-width because if the block itself is flexible, Here is an example:
P.blocktext {
margin: auto;
width: 8em
}
This is also the way to centre an image: make it into a block of its own and apply the margin and fix width properties to it. For example:
img.displayed {
display: block;
margin: auto;
}
<img class="displayed" src="..." alt="...">
Centering Vertically
CSS doesn’t have a property for centering things vertically. But even in CSS2, you can centre blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell because the contents of a table cell can be centred vertically. Table cell is css3 features this very easy to work align object centre.
div.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
<div class="container">
<p>This small paragraph…</p>
</div>
Centering Vertically In CSS
CSS, another way to align object using position property. CSS3 provide new feture to align vertical anf horizontal center. For example:
<div class=container3>
<p>This paragraph…
</div>
div.container3 {
height: 10em;
position: relative
}
div.container3 p {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%) }
The essential rules are:
- Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
- Make the element itself absolutely positioned.
- Use a translation to move the element up by half its own height.
Centring Vertically And Horizontal Using Display Flex
The flex property in CSS is shorthand for flex-grow, flex-shrink, and flex-basis. It only works on the flex items, so if the container’s item is not a flex item, the flex property will not affect the corresponding item.
This property is used to set the length of flexible items. The positioning of child elements and the main container is easy with this CSS property. It is used to set how a flex item will shrink or grow to fit in the space.
The flex property can be specified by one, two, or three values.
When there is the one-value syntax, the value must either be a number or the keywords such as none, auto, or initial.
1. Display
This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children, yes but without parent flex not working anywhere.
.container {
display: flex;
}
This establishes the main axis, thus defining the direction flex items are placed in the flex container. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
2. Justify-content
Justify-content is a display flex feature to use justify-content but without display, flex is not possible to content align horizontal centre. Many properties in flex-start, flex-end, centre, space-between, space-around, space-evenly, start, end, left, right.
.container {
justify-content: center;
}
- centre: items are centred along the line
3. Align-Items
Align item in flexbox give new feature vertically align the object. Also without display flex not possible to apply vertical centre align-item.
.container {
align-items: center;
}
- centre: items are centred in the cross-axis
4. Align-Content
This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main axis.
.container {
align-content:center
}
- centre: items centred in the container
