How to Center a DIV Within a DIV
By Stephen Bucaro
<div style="display:flex; width:350px; height:350px; justify-content:center; align-items:center; border-style:solid;">
<div style="border-style:solid; width:200px; height:200px;">
</div>
</div>
This example uses the new CSS3 Flexible Box, or flexbox , which is a layout model providing
for page layout when the page must accommodate different screen sizes and different display devices.
The outer container DIV element sets the value of the justify-content property to center,
which centers the inner DIV element horizontally.
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
Value | Description |
flex-start | Default value. Items are positioned at the beginning of the container |
flex-end | Items are positioned at the end of the container |
center | Items are positioned at the center of the container |
space-between | Items are positioned with space between the lines |
space-around | Items are positioned with space before, between, and after the lines |
initial | Sets this property to its default value |
inherit | Inherits this property from its parent element |
The outer container DIV element also sets the value of the align-items property to center,
which centers the inner DIV element vertically.
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
Value | Description
| stretch | Default. Items are stretched to fit the container |
center | Items are positioned at the center of the container |
flex-start | Items are positioned at the beginning of the container |
flex-end | Items are positioned at the end of the container |
baseline | Items are positioned at the baseline of the container |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element |
More Easy Cascading Style Sheets: • How to Style a Table • Write Style Rules to Make Them Understandable • Understanding CSS Positioning • Display Overlapping Images on Your Webpage • Spice Up Your Web Forms with Color and Graphics • How to Center a DIV • How to Overlay Text on an Image • Easy CSS Animated Flaming Text • Easy CSS Buttons • Easy CSS 3D Mouse-over Pressed Text Effect
|