CSS: Vertically center with margin: auto

We have card with all CSS centering options. You probably want to head over there and get an overview over what techniques are available for your use case and browser requirements.

Check out the jsFiddle Demo Show archive.org snapshot .

CSS

.absoluteCenterWrapper {
 position: relative; /* Declare this element as the anchor point for centering */
}

/* Positioning */
.absoluteCenter {
 margin: auto; /* Required */
 position: absolute; /* Required */
 top: 0; bottom: 0; /* Aligns Vertically */
 left: 0; right: 0; /* Aligns Horizontally */
}

/* Make sure the centered element fits into its container. If you know that's the case, you can omit this part. */
.absoluteCenter {
 max-height: 100%;
 max-width: 100%;
}

HTML

<div class="absoluteCenterWrapper">
 <img src="PATHTOIMAGE" class="absoluteCenter">
 <p>Paragraph goes here.</p>
</div>

stackoverflow.com

Last edit

About 7 years ago

Henning Koch

License

Source code in this card is licensed under the MIT License.

Autofocus a form field with HTML5 or jQuery

In Webkit you can use the HTML5-attribute autofocus:

= form.text_field :title, :autofocus => 'autofocus'

Here is a jQuery fallback for browsers that don't speak HTML5:

var Autofocus = {

  supported: function() {
    retur...

Auto-generate Cucumber navigation paths

Don't you just hate to write Cucumber path helpers to be able to say this?

When I go to the user form for "foo@bar.de"               # goes to edit_user_path(User.find_by_anything!('foo@bar.de'))
When I go to the form for the user "foo@ba...

ImageMagick: How to auto-crop and/or resize an image into a box

Auto-cropping

ImageMagick can automatically crop surrounding transparent pixels from an image:

convert input.png -trim +repage output.png

You need to +repage to update the image's canvas, or applications will be randomly confused.
Trim...

Posted to makandra dev (2014-03-26 13:49)

CSS: Vertically center with margin: auto

CSS

HTML

Related cards:

Example

Auto-cropping