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:
• Create a Cool Picture Frame Effect with CSS
• Pro CSS Techniques
• Easy Visual Effects to Spice Up Your Webpage
• Add Drop Shadows to Your Pictures
• How to Center a DIV Within a DIV
• Add Style to Your Blockquotes
• Easy CSS Popup Windows
• Code for Horizontal Drop-down Menu Bar
• Write Style Rules to Make Them Understandable
• Create a No Image Rollover Button or Badge

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-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268