Skip to content
View in the app

A better way to browse. Learn more.

MSFN

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

[HTML/CSS] - Vertical centering

Featured Replies

I'm wondering if anyone has any CSS-only methods of making a div of a fixed height appear vertically centered in the page. I've found methods that make it appear like this, but most of them use some sort of 25/50/25 rule (percentages here) to make the "middle section" appear in the center.

Any ideas?


How about something like this:

.mydiv{
background-color: black;
color: white;
position: fixed;
left: 10em;
top: 10em;
right: 10em;
bottom: 10em;
height: 100px;
}

To make its height fixed, i overrode the auto height adjustment with height: 100px. And if you change position to absolute instead of fixed, it will be like a normal div, else now it is fixed in the middle.

you mean that this doesnt work?

div.whatever 
{
vertical-align: middle;
}

  • Author

@n7epsilon - thanks for the reply, but it doesn't seem to work for me in Opera or IE7. I had thought of something like that, but sending conflicting information about an object usually ends up with strange cross-browser performance.

@ripken204 - nope... try it yourself.

Create an account or sign in to comment

Recently Browsing 0

  • No registered users viewing this page.

Account

Navigation

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.