Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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 CSS Button Rollovers
• CSS Transition Code For a Pulsating Button
• Add Drop Shadows to Your Pictures
• FREE Ebook - Basic Cascading Style Sheets
• Make a Fixed-width Variable-height Round Cornered Box
• Basic Introduction to Simple Responsive Design With Code
• How to Style a Table
• Display Overlapping Images on Your Webpage
• How to Style a List
• 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