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:
• Easy CSS Popup Windows
• How to Overlay Text on an Image
• Using the HSL Color Specification
• How to Use a Pull Quote
• Easy Visual Effects to Spice Up Your Webpage
• Easy Three-level Expanding Menu Code
• Add Background Color to a Heading
• How to Style a Table
• CSS Transition Code For a Pulsating Button
• The CSS Box Model

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