How TO Center A Div In CSS

Centering a div
  1. Using Position Property

USING POSITION PROPERTY

<! — — — Html —Starter —  Template— >-<header class="parent-container"><div>Center ME!!!! </div></header><! — — — Html — Template →-
div{position: absolute;top: 50%;left:50%;transform: translate(-50%, -50%);}
header{height: 50vh;width: 50vw;position: relative;}div{position: absolute;top: 50%;left:50%;transform: translate(-50%, -50%);}

USING FLEX PROPERTY

  1. As usual you would give your parent container a height.
  2. Set its display property to flex
  3. Set its align-items property to center
  4. Set its Justify-content property to center
header{height: 50vh;width: 50vw;display: flex;align-items: center;justify-content: center}

--

--

--

Frontend Developer and I write about it.... And a lot more

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Join Strategies in Apache Spark (not regular Join types)!!

Understanding the Basics of Git Version Control

Ways to Use the Memory Foam Bedmattress. https://t.co/yjubiKGUXq

Undefined Labs is now a part of Datadog!

Free Code Camp 学习笔记

Type inference for beginners — Part 2

NETLIFY DEPLOYMENT: FAILED DURING STAGE “BUILDING SITE” WITH REACT.JS

Python Tutorial: Python ConfigParser

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Success Ibekwe

Success Ibekwe

Frontend Developer and I write about it.... And a lot more

More from Medium

CSS Trick: Keep items of a card container at the bottom

The Complete JS Notes #3 🧵

Three design principles for your CSS layout

Build your First Chrome Extension