CSS Center Div Horizontally

May 26, 2019

css

Solution 1

<div style="width: 400px; margin:0 auto;">  <div style="background-color: yellow; text-align: center;">    Center Me  </div></div>

Solution 2

<div style="text-align: center;">  <div style="background-color: yellow; display: inline-block; width: 400px;">    Center Me  </div></div>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.

Tags

css

Related articles

Tachyons CSS Cheatsheet Css Text Ellipsis CSS Make Block Next Line Without 100% Width CSS Add Character Before Element CSS Limit Text to N Lines Css Center Text and Div Vertically CSS Line Breaks of Multiline String Smallest CSS Framework Css Make Text No Break (Single Line, No Wrap)CSS Overlay Center Horizontally And Vertically CSS Text Outline or Shadow CSS Overlay Center Text Vertically And Horizontally CSS Comment CSS Text Overlay Over Image at Bottom With Gradient Background CSS Image With Black Overlay and Center White Text CSS/SCSS Inline Horizontal Separator Webpack: Merge Multiple CSS Into Single File