Different ways of centering a div with CSS by kushyzee

View this thread on: hive.blog | peakd.com | ecency.com

hive-169321 · @kushyzee · Oct 1 '22

$26.54

Different ways of centering a div with CSS

Centering a div is one of the worst nightmares of most programmers and that's because some of the methods only work in specific conditions. You might be able to center a div appropriately in one project but you won't be able to use the same method in another project. There are a lot of ways to center a div vertically, horizontally, and both but I will only talk about the most common methods.

![](https://images.ecency.com/DQmVhzNGJ6ebZ1qeKMiKFXtCeTVboXhjWBFeaTrU1in95nU/20221001_214803_0000.jpg)

## Centering a div horizontally with margins
Let’s assume a very simple webpage with a body, a div with 60% width, and some texts inside the div

```
<body>
    <div>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est harum repellat, quidem placeat, tenetur error nam quaerat consequuntur corrupti, quibusdam qui illo odit obcaecati. Vel, incidunt. Ipsa neque doloribus perferendis.</p>
    </div>
</body>
```

```
body {
    font-size: 1.8rem;
    background-color: darkgray;
}

div {
    width: 60%;
    padding: 1em;
    background-color: red;
    color: white;
}
```
![](https://images.ecency.com/DQmYeuAsaDrzqX2EEkWLGcoZvBkYLjLvV2bgWmMqwE15Ffv/new1.png)

In order to center that div in the middle of the page horizontally, we just have to apply **margin-inline: auto;** You can also do **margin: 0 auto;** where the 0 represents the top and bottom margin while the auto represents the left and right margins which are also called margin-inline.

![](https://images.ecency.com/DQmX39NXHDoLReYVthSw3d2tUKVYeMkPL6Tid7wg8rQt5pY/new2.png)

## Centering a div horizontally with CSS position and translate
Using the same code as before, we can also center the grey box containing texts using CSS position and translate properties. The first thing you will have to do is to apply **position: relative** on the direct parents of the div and in this case it’s the body tag. If you don’t specify a relative position, the div will be positioned relative to the root element, which means the html tag and in this case, it doesn’t really matter because the body and html tags are basically in the same position.

```
body {
    position: relative;
}
```

The next thing is to give a **position: absolute** to the div element, then set left to 50%, this will push the div to the right, and now we can use the translate property to shift it into position. The code will now look like this:

```
div {
    position: absolute;
    left: 50%;
    translate: -50%;
}
```
![](https://images.ecency.com/DQmX39NXHDoLReYVthSw3d2tUKVYeMkPL6Tid7wg8rQt5pY/new2.png)

## Centering a div horizontally with flexbox
Flexbox is the easiest way to center anything, both horizontally and vertically (we will get to that later). We just have to apply **display: flex** on the parent (the body) and set justify-content to center.

```
body {
    display: flex;
    justify-content: center;
}
```
And that’s it; you don’t need to do any extra thing. Applying a flex on the container can change the layout of your design if there are other items there. Let's assume we have another div in the body element, once we apply a **display: flex** the two divs will be positioned side by side, but I want them to be arranged vertically. So I can just use **flex-direction: column** but that will bring another problem: both divs won’t be centered anymore
![](https://images.ecency.com/DQmWWFkzk5q56EEgaAUDq9sEvE2sHFfMMKFS5mpzmc9mV6d/new3.png)

We can easily fix that with the align-items property, instead of justify-content. You just have to adapt the code to suit the layout of your design and it will work as before. The new code will now be:

```
body {
    display: flex;
    align-items: center;
    flex-direction: column;
}
```
![](https://images.ecency.com/DQmWP5MU2r9uaTiWEzHvbj8hDTjDWK5GUUnT6B1whT9YdaH/new4.png)

## Centering a div vertically with CSS position and translate
Centering a div vertically can really be a nightmare because most people forget that they will need to set a height on the parent element. For example; we are going to use the same code as before but this time we will be centering it vertically, it’s the opposite of what we did with the horizontal centering.

```
body {
    position: relative;
}

div {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
}
```
The translate property is now 0 -50% and that’s because 0 represents the x-axis, while -50% represents the y-axis. If you specify only one value, it’s going to be taken as the x-axis. Doing the above code won’t work as expected, we are going to have a very weird result

![](https://images.ecency.com/DQmPGSdXxKu2K7pAcCVQEqTVkETtv24yvMfoJ6qh1pmGdDV/new5.png)

The div has been pushed out of the page and that’s because we didn’t specify a height on the parent (the body). We can easily fix that with **min-height: 100vh**. It’s usually better to use min-height, instead of just using height, it’s more responsive. You can use any height value and it totally depends on what you’re working on. I used 100vh because most landing page designs usually take up the entire viewport, especially if it’s the hero section. After giving the body a min-height, the div will be centered as expected.

![](https://images.ecency.com/DQmXEQiJBLTaAf6sMwK88DC5BxnYpbRk5D5gkNcNDZwF3JC/new6.png)

We can combine both methods of centering horizontally and vertically and place the div in the center of the page. This is what the code looks like:

```
div {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
``` 
And this will be the outcome:

![](https://images.ecency.com/DQmNxMxcnwZqj7KTVZdqTS2SQPa8G5VHrK94phcSHPcyJmo/new7.png)

## Centering a div vertically with CSS flexbox
Again, this is also the easiest way to center a div vertically, and just like in the previous method, we also need to set a min-height before it can work appropriately.

```
body {
    display: flex;
    align-items: center;
    min-height: 100vh;
}
```

And just like that, we have the div vertically centered. From here we can also apply the horizontal centering and have the box directly in the middle. The code for that is:

```
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
```

And the below result will be produced: 

![](https://images.ecency.com/DQmNxMxcnwZqj7KTVZdqTS2SQPa8G5VHrK94phcSHPcyJmo/new7.png)

## Conclusion
Centering a div or any other item on a webpage can be difficult at first but knowing the right method to use in different situations can make it very easy and you will get better at it with experience. All the methods I mentioned in this article will work in all situations, but in some cases, you will have to tweak things a bit to fit the particular project you are working on, just in case the usual method doesn’t work.

**Thanks for reading**

![](https://images.ecency.com/DQmbLhPcVduzukxbvrW8pAyEeLpgxqFs1sddNPJCm5xjM4V/img_0.018478079605897074.jpg)

**Connect with me on:**
**Twitter:** **[@kushyzeena](https://twitter.com/kushyzeena)**
**Readcash:** **[@kushyzee](https://read.cash/@Kushyzee)**
<div class = phishy> 
<strong>Lead image: created with Canva</strong>
</div

👍 ocdb, newsflash, ocd, betterdev, nbs.gmbh, wrestorgonline, quochuy, meritocracy, foxon, hextech, cadawg, giftgiver, myegoandmyself, nthtv, nftmart, smartvote, diyhub, bdmillergallery, francis.melville, eonwarped, walterjay, ifarmgirl, roelandp, ocdspeak, trangbaby, ocd-witness, juecoree, mafia.wallet, deepu7, rishi556, alphacore, jlsplatts, curation-cartel, h-e, detlev, stemgeeks, thecouncil, askari, dwixer, farmboy-boss, the-burn, apokruphos, the-grandmaster, cielitorojo, techken, bushradio, gwajnberg, devann, olaunlimited, broxi, martibis, pradeepdee6, timmy-turnip, yadamaniart, slider2990, babytarazkp, charlrific, stemline, aioflureedb, steemtelly, oneup-curator, dora381, mammasitta, irivers, and 95 others
👎 xocdb

`author`	kushyzee
`permlink`	different-ways-of-centering-a
`category`	hive-169321
`json_metadata`	{"links":["https://twitter.com/kushyzeena","https://read.cash/@Kushyzee"],"image":["https://images.ecency.com/DQmVhzNGJ6ebZ1qeKMiKFXtCeTVboXhjWBFeaTrU1in95nU/20221001_214803_0000.jpg","https://images.ecency.com/DQmYeuAsaDrzqX2EEkWLGcoZvBkYLjLvV2bgWmMqwE15Ffv/new1.png","https://images.ecency.com/DQmX39NXHDoLReYVthSw3d2tUKVYeMkPL6Tid7wg8rQt5pY/new2.png","https://images.ecency.com/DQmX39NXHDoLReYVthSw3d2tUKVYeMkPL6Tid7wg8rQt5pY/new2.png","https://images.ecency.com/DQmWWFkzk5q56EEgaAUDq9sEvE2sHFfMMKFS5mpzmc9mV6d/new3.png","https://images.ecency.com/DQmWP5MU2r9uaTiWEzHvbj8hDTjDWK5GUUnT6B1whT9YdaH/new4.png","https://images.ecency.com/DQmPGSdXxKu2K7pAcCVQEqTVkETtv24yvMfoJ6qh1pmGdDV/new5.png","https://images.ecency.com/DQmXEQiJBLTaAf6sMwK88DC5BxnYpbRk5D5gkNcNDZwF3JC/new6.png","https://images.ecency.com/DQmNxMxcnwZqj7KTVZdqTS2SQPa8G5VHrK94phcSHPcyJmo/new7.png","https://images.ecency.com/DQmNxMxcnwZqj7KTVZdqTS2SQPa8G5VHrK94phcSHPcyJmo/new7.png","https://images.ecency.com/DQmbLhPcVduzukxbvrW8pAyEeLpgxqFs1sddNPJCm5xjM4V/img_0.018478079605897074.jpg"],"tags":["hive-169321","stem","neoxian","pob","hive","vyb","oneup","palnet","coding"],"app":"ecency/3.0.34-mobile","format":"markdown+html"}
`created`	2022-10-01 21:53:36
`last_update`	2022-10-01 21:53:36
`depth`	0
`children`	8
`last_payout`	2022-10-08 21:53:36
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	13.288 HBD
`curator_payout_value`	13.251 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	7,148
`author_reputation`	75,924,249,520,559
`root_title`	"Different ways of centering a div with CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	117,102,216
`net_rshares`	40,823,618,352,975
`author_curate_reward`	""

properties (23)vote details (160)

voter	rshares	pct
mammasitta	3,382,034,923	1%
roelandp	31,049,608,166	3.5%
rishi556	21,737,594,545	100%
slider2990	4,473,515,835	100%
yadamaniart	4,515,160,691	5%
walterjay	37,008,571,183	3%
askari	11,517,704,476	10%
detlev	17,637,744,929	1.5%
batman0916	714,324,892	4.75%
rt395	2,526,308,507	2.5%
newsflash	4,678,039,490,281	7.5%
rawselectmusic	1,971,769,463	5%
alphacore	21,027,716,220	20.2%
guchtere	954,318,722	4.75%
techken	7,230,140,110	9.59%
diegoameerali	850,010,509	3%
lenasveganliving	2,559,739,563	5%
ocd	1,305,133,526,410	10%
martibis	4,931,976,232	3%
francis.melville	52,809,498,420	96%
jlsplatts	20,744,563,568	2%
hanggggbeeee	868,979,675	5%
petrolinivideo	517,881,287	5.62%
eonwarped	43,264,387,945	3%
zoltarian	590,869,819	10%
tomatom	994,095,333	5%
fourfourfun	1,071,077,787	3.75%
anikekirsten	500,330,903	5%
ronpurteetv	940,819,523	5%
juecoree	27,397,994,001	42%
gabrielatravels	1,612,762,411	4%
ricardo993	1,197,025,252	6%
unicron	2,718,336,063	60%
cadawg	196,744,610,201	90%
ocd-witness	27,992,502,564	10%
supreme-verdict	496,754,522	19.19%
miroslavrc	2,893,126,908	5%
foxon	304,704,715,326	30%
obsesija	2,464,654,651	4.75%
quochuy	670,652,853,352	12.23%
indigoocean	2,230,201,440	5%
veteranforcrypto	715,297,489	3%
bushradio	6,930,079,138	60%
bdmillergallery	56,438,076,396	6%
deepu7	23,615,477,454	4.5%
haccolong	3,079,232,841	5%
ashikstd	1,108,955,329	40%
nathyortiz	981,548,051	5%
steemulant	236,010,655	12.23%
ocdb	29,156,915,251,525	9.5%
smartvote	78,891,021,291	3.7%
hoaithu	1,161,818,844	4.25%
artmedina	748,036,596	5%
anhvu	842,187,527	4%
pradeepdee6	4,847,181,763	4%
javyeslava.photo	1,795,923,994	3.5%
pocketjs	48,347,257	12.23%
athunderstruck	2,086,188,430	5%
tsunsica	1,206,716,132	10%
devann	5,825,965,401	4%
variedades	1,338,815,636	3.8%
apokruphos	8,805,563,528	3%
broxi	5,021,406,448	30%
steemtelly	3,746,617,796	12.23%
giftgiver	122,747,992,850	100%
yiobri	648,903,330	5%
ariful9551	715,827,448	40%
beerlover	1,917,333,273	1.5%
stemgeeks	17,386,607,867	60%
stemcuration	1,255,939,411	60%
babytarazkp	3,996,426,735	40%
abh12345.stem	601,260,989	30%
kaeves4711	2,442,869,243	100%
zeesh	2,368,569,912	5%
yggdrasil.laguna	327,251,717	30%
cd-stem	524,789,035	100%
usualsidekick	624,273,151	100%
chapmain	106,770,655	100%
diyhub	59,306,311,176	30%
dpend.active	702,178,412	2%
penned-bullshit	946,765,585	100%
hextech	223,808,477,306	100%
sidkay588	1,568,043,671	100%
self-help.dev	857,351,263	100%
olaunlimited	5,520,593,651	4%
mafia.wallet	25,009,920,819	100%
nftmart	85,764,214,998	100%
kawsar8035	2,773,292,443	2.85%
dwixer	11,429,515,258	100%
davideazul	1,172,155,888	10%
trangbaby	29,996,285,948	12.23%
nbs.gmbh	715,292,221,926	9.5%
dorkpower	1,002,187,224	30%
blezyn	598,114,397	5%
stemcur	599,884,277	48%
brofund-stem	1,001,305,507	60%
betterdev	951,630,847,210	100%
zacki11	2,409,689,195	100%
meritocracy	527,286,224,759	4.75%
pepeymeli	579,457,141	50%
stemline	3,789,732,850	30%
meestemboom	478,559,899	25%
scooter77.stem	606,656,159	60%
rondonshneezy	2,725,294,030	20%
cielitorojo	8,080,616,871	6.65%
krishu.stem	887,702,443	100%
babeltrips	2,482,886,703	6.11%
scholaris.stem	1,735,284,859	100%
h-e	19,362,177,654	100%
elgatoshawua	2,208,894,369	4.75%
thecouncil	11,738,780,010	100%
moraviareosa	0	100%
hexagono6	809,339,807	4.75%
timmy-turnip	4,805,650,785	40%
leveluplifestyle	2,412,946,937	5%
brujita18	1,628,986,700	5%
ifarmgirl	35,716,216,822	30%
holovision.stem	996,096,426	50%
partiesjohall	1,637,549,059	10%
josdelmi	1,019,036,490	5%
aprasad2325	1,752,721,072	4.75%
star.stem	1,581,897,818	50%
irivers	3,090,077,252	100%
panosdada.pob	495,053,067	100%
ivycrafts	1,491,342,428	5%
lynnnguyen	830,157,095	12.23%
kimloan	1,139,720,118	6.11%
dora381	3,595,394,233	12.23%
master.splinter	1,787,756,138	66%
crazy-bee	1,420,377,552	12.23%
kalkulus	623,661,515	20%
waivio.curator	2,896,395,183	5.47%
sunnyvo	2,102,870,689	6.11%
hyhy93	537,907,631	12.23%
saboin.stem	449,383,830	60%
thgaming	633,084,210	6%
tristan.todd	1,625,920,037	10%
aioflureedb	3,753,556,351	99.98%
oneup-curator	3,604,275,736	40%
ivypham	2,269,703,257	12.23%
wrestorgonline	710,835,912,283	5%
curation-cartel	19,463,868,656	96%
tuyenmei95	2,015,528,003	12.23%
gwajnberg	6,375,839,053	83%
pob-curator	776,855,955	30%
pal-curator	822,427,892	95%
neoxag-curator	500,910,813	20%
stem-curator	684,255,669	100%
vyb-curator	493,535,499	20%
nthtv	87,700,586,431	100%
rondonsleezy	694,389,625	20%
xocdb	-126,616,054	-9.5%
youdontknowme	612,716,886	6.11%
myegoandmyself	97,134,482,408	6%
farmboy-boss	11,090,364,559	30%
twosomesup	778,412,758	4.75%
ocdspeak	30,188,662,645	10%
the-grandmaster	8,377,690,884	5%
the-burn	10,591,898,847	5%
charlrific	3,828,096,279	100%

@charlrific · Oct 2 '22

This will be really helpful, especially for newbies.
I had really hard times centering divs when I started learning. There are even some things I've discovered from his article.
Thanks for sharing this!

properties (22)

`author`	charlrific
`permlink`	re-kushyzee-2022102t122224674z
`category`	hive-169321
`json_metadata`	{"tags":["hive-169321","stem","neoxian","pob","hive","vyb","oneup","palnet","coding"],"app":"ecency/3.0.28-vision","format":"markdown+html"}
`created`	2022-10-02 11:22:30
`last_update`	2022-10-02 11:22:30
`depth`	1
`children`	1
`last_payout`	2022-10-09 11:22:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	203
`author_reputation`	12,515,265,882,572
`root_title`	"Different ways of centering a div with CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	117,115,758
`net_rshares`	0

@kushyzee · Oct 2 '22

Centering divs is something we all found difficult as a newbie, but we get better at it with experience. Thanks for reading

properties (22)

`author`	kushyzee
`permlink`	re-charlrific-2022102t145341809z
`category`	hive-169321
`json_metadata`	{"tags":["hive-169321","stem","neoxian","pob","hive","vyb","oneup","palnet","coding"],"app":"ecency/3.0.34-mobile","format":"markdown+html"}
`created`	2022-10-02 13:53:42
`last_update`	2022-10-02 13:53:42
`depth`	2
`children`	0
`last_payout`	2022-10-09 13:53:42
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	124
`author_reputation`	75,924,249,520,559
`root_title`	"Different ways of centering a div with CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	117,118,712
`net_rshares`	0

@curation-cartel · Oct 2 '22

![1UP-PIZZA.png](https://files.peakd.com/file/peakd-hive/curation-cartel/23xediR4hotaNsS5pUJrmYVg3YGeTLpui41uCij2jhUDZ4uFT84zoGJf8a8VnfELXLJgt.png) |  <div class="phishy"><u><h4>You have received a __1UP__ from @gwajnberg!</h4></u></div> The @oneup-cartel will soon upvote you with:<hr> __@oneup-curator, @stem-curator, @vyb-curator, @pob-curator, @neoxag-curator, @pal-curator__ <hr>_And they will bring !PIZZA 🍕._
-|-

<sup>[Learn more](https://peakd.com/hive-102223/@flauwy/the-curation-cartel-1up-trigger-smart-voting-mana-and-high-delegation-returns-for-14-different-tribes) about our delegation service to earn daily rewards. Join the Cartel on [Discord](https://discord.gg/mvtAneE3Ca).</sup>

properties (22)

`author`	curation-cartel
`permlink`	re-different-ways-of-centering-a-20221002t162135z
`category`	hive-169321
`json_metadata`	"{"app": "beem/0.24.26"}"
`created`	2022-10-02 16:21:36
`last_update`	2022-10-02 16:21:36
`depth`	1
`children`	0
`last_payout`	2022-10-09 16:21:36
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	698
`author_reputation`	1,123,173,135,173
`root_title`	"Different ways of centering a div with CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	117,121,863
`net_rshares`	0

@diyhub · Oct 2 '22

<div class="pull-right"><a href="https://peakd.com/trending/hive-189641"><img src="https://cdn.steemitimages.com/DQmV9e1dikviiK47vokoSCH3WjuGWrd6PScpsgEL8JBEZp5/icon_comments.png"></a></div>

#### Thank you for sharing this amazing post on HIVE!
Your content got selected by our fellow curator tibfox & you just received a little thank you upvote from our **non-profit** curation initiative!

You will be **featured in** one of our recurring **curation compilations** which is aiming to offer you a **stage to widen your audience** within the DIY scene of Hive.

Make sure to always post / cross-post your creations within the [DIYHub community on HIVE](https://peakd.com/trending/hive-189641) so we never miss your content. We also have a [discord server](https://discord.gg/mY5uCfQ) where you can connect with us and other DIYers. If you want to support our goal to motivate other DIY/art/music/gardening/... creators **just delegate to us** and **earn 100% of your curation rewards**!

### Stay creative & hive on!

properties (22)

`author`	diyhub
`permlink`	re-different-ways-of-centering-a-20221002t174212z
`category`	hive-169321
`json_metadata`	"{"app": "beem/0.24.26"}"
`created`	2022-10-02 17:42:12
`last_update`	2022-10-02 17:42:12
`depth`	1
`children`	0
`last_payout`	2022-10-09 17:42:12
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	1,017
`author_reputation`	360,077,782,901,426
`root_title`	"Different ways of centering a div with CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	117,123,825
`net_rshares`	0

@gwajnberg · Oct 2 '22

I didnt know about all these options
!1UP

<a href="https://discord.gg/zQrvxAu7mu">
<img src="https://files.peakd.com/file/peakd-hive/thecuriousfool/23wCNFDyCLJu1v77TTg2MYKkd7XWkgF9fhiLujTDAaLaUz7H4AaQkDentB5UMVS8FcrVs.png"></a>

properties (22)

`author`	gwajnberg
`permlink`	re-kushyzee-2022102t101941148z
`category`	hive-169321
`json_metadata`	{"tags":["hive-169321","stem","neoxian","pob","hive","vyb","oneup","palnet","coding"],"app":"ecency/3.0.34-mobile","format":"markdown+html"}
`created`	2022-10-02 16:19:42
`last_update`	2022-10-02 16:19:42
`depth`	1
`children`	1
`last_payout`	2022-10-09 16:19:42
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	228
`author_reputation`	148,893,337,789,229
`root_title`	"Different ways of centering a div with CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	117,121,828
`net_rshares`	0

@kushyzee · Oct 2 '22

Now you know them 😊 thanks for the token

properties (22)

`author`	kushyzee
`permlink`	re-gwajnberg-2022102t192228904z
`category`	hive-169321
`json_metadata`	{"tags":["hive-169321","stem","neoxian","pob","hive","vyb","oneup","palnet","coding"],"app":"ecency/3.0.34-mobile","format":"markdown+html"}
`created`	2022-10-02 18:22:30
`last_update`	2022-10-02 18:22:30
`depth`	2
`children`	0
`last_payout`	2022-10-09 18:22:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	41
`author_reputation`	75,924,249,520,559
`root_title`	"Different ways of centering a div with CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	117,124,785
`net_rshares`	0

@monioluwa · Oct 3 '22

I really do not understand how you guys find a way to wrap your head around CSS stylings.😅 I've tried to learn it multiple times without any luck and that's one of the reasons why I don't really like the Frontend part of the web.

And you're right, Flex does make everything a bit easy, and using Sass helped me cope with the whole thing for a while. 

Nice work chief.

properties (22)

`author`	monioluwa
`permlink`	re-kushyzee-rj6qak
`category`	hive-169321
`json_metadata`	{"tags":["hive-169321"],"app":"peakd/2022.07.1"}
`created`	2022-10-03 16:11:09
`last_update`	2022-10-03 16:11:09
`depth`	1
`children`	1
`last_payout`	2022-10-10 16:11:09
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	371
`author_reputation`	14,336,654,616,518
`root_title`	"Different ways of centering a div with CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	117,156,243
`net_rshares`	0

@kushyzee · Oct 4 '22

I studied CSS for a very long time until I became very comfortable with it, I know how hard it can be and some people usually run away from frontend because of it 😆

Thank you for reading

properties (22)