LOGBOOK

HELP

1 / 333
time's up — finish this card
Other keys: show • Space: good • 1-4: rate • 0: skip • 5: flag
Topic CSS Basics

Question

How do you center an element horizontally in CSS?

Answer

There is no single "center" property — the right technique depends on what you are centering: text uses text-align, a fixed-width block uses auto side margins, and flex children use justify-content.

The three everyday cases:

Inline content or text — set text-align: center on the parent, which centres the text and inline elements inside it:

.container { text-align: center; }

A block element with a known width — give it auto left and right margins, which split the leftover space evenly on both sides:

.box {
    width: 200px;
    margin: 0 auto;   /* must have a width for this to do anything */
}

Flex children — make the parent a flex container and use justify-content (horizontal axis) and optionally align-items (vertical axis):

.container {
    display: flex;
    justify-content: center;  /* horizontal */
    align-items: center;      /* vertical */
}

A quick lookup:

What you have How to center it horizontally
Text / inline content text-align: center on the parent
Block with a width margin: 0 auto
Flex children justify-content: center on the flex parent

The most common mistake is margin: 0 auto doing nothing — almost always because the block has no explicit width and is already filling the row.

Go deeper:

or press any other key
Topic Introduction to Web Technologies

Question

What are hybrid mobile applications, and what variants exist?

Answer

Hybrid apps run web technology inside a native app shell, so one codebase ships to multiple platforms while still looking and installing like a real app.

The goal of a hybrid app is to hide the seams: from the user's point of view it is just an app from the store, even though a web application is running inside a "native frame". This buys you native distribution and hardware access without writing a separate app for each OS. There are three main variants, which differ in how much is really web vs. native:

Variant How it works Example
Browser-based a WebView displays the web app, with plugins for hardware Cordova, Ionic
Native UI JS logic, but it renders real native widgets React Native
Cross-compiled code is compiled to native machine code Flutter, Xamarin
  • Browser-based (Cordova / Ionic) — your HTML/CSS/JS runs in an embedded browser (WebView), and plugins bridge to the camera, GPS, etc. Easiest path from an existing web app, but performance is the weakest of the three.
  • Native UI (React Native) — you write JavaScript, but it maps to actual native UI components, so the interface looks and performs more native.
  • Cross-compiled (Flutter) — Dart code is compiled to native ARM code and drawn by its own rendering engine, giving the best performance among hybrid approaches.

Memory tip: all three trade a bit of native performance for one shared codebase; they just draw the web/native line in different places.

or press any other key