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

Holiday Gift Guide
Holiday Gift Guide

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

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