Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

How to Center a DIV Within a DIV

<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;
ValueDescription
flex-startDefault value. Items are positioned at the beginning of the container
flex-endItems are positioned at the end of the container
centerItems are positioned at the center of the container
space-betweenItems are positioned with space between the lines
space-aroundItems are positioned with space before, between, and after the lines
initialSets this property to its default value
inheritInherits 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;
ValueDescription
stretchDefault. Items are stretched to fit the container
centerItems are positioned at the center of the container
flex-startItems are positioned at the beginning of the container
flex-endItems are positioned at the end of the container
baselineItems are positioned at the baseline of the container
initialSets this property to its default value. Read about initial
inheritInherits 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

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268